0元制造h5微传单_基于HTML5的齿轮动画特效

日期:2020-12-25 类型:行业动态 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

基于HTML5的齿轮动画特效   发布     这篇文章主要为大家详细介绍了基于HTML5的齿轮动画特效,该齿轮动画的最大特点是它由好多个齿轮组成,这对齿轮传动的算法要求就大大提高了,而且我们并没有用JavaScript,如何实现齿轮动画,感兴趣的小伙伴们可以参考一下

这是一个基于HTML5的齿轮动画特效,我们将齿轮转动的物理学原理,转换为HTML5代码,在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成,这对齿轮传动的算法要求就大大提高了,而且我们并没有用JavaScript,而是纯CSS3实现的。

HTML代码

XML/HTML Code复制内容到剪贴板
  div id= gears-static /div     div id= gear-system-1     div  >CSS代码

CSS Code复制内容到剪贴板
#gears-static{    background:url(FgFnjks.png) no-repeat -363px -903px;    width:329px;    height:602px;    position:absolute;    bottombottom:5px;    rightright:0px;    opacity:0.4;   }   #title{    vertical-align:middle;    color:#9EB7B5;    width:43%;    display:inline-block;   }   #title h1{    font-family: 'PTSansNarrowBold', sans-serif;    font-size:3.6em;    text-shadow:rgba(0, 0, 0, 0.36) 7px 7px 10px;   }   #title p{    font-family: sans-serif;    font-size:1.2em;    line-height:148%;    text-shadow:rgba(0, 0, 0, 0.36) 1px 1px 0px;   }     .shadow{    -webkit-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);    -moz-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);    box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);   }     /*gear-system-1*/  #gear15{    background: url(FgFnjks.png) no-repeat 0 -993px;    width: 321px;    height: 321px;    position:absolute;    left:45px;    top:179px;      -webkit-animation: rotate-back 24000ms linear infinite;    -moz-animation: rotate-back 24000ms linear infinite;    -ms-animation: rotate-back 24000ms linear infinite;    animation: rotate-back 24000ms linear infinite;   }   #shadow15{    width:306px;    height:306px;    -webkit-border-radius:153px;    -moz-border-radius:153px;    border-radius:153px;    position:absolute;    left:52px;    top:186px;   }   #gear14{    background: url(FgFnjks.png) no-repeat 0 -856px;    width: 87px;    height: 87px;    position:absolute;    left:162px;    top:296px;   }   #shadow14{    width:70px;    height:70px;    -webkit-border-radius:35px;    -moz-border-radius:35px;    border-radius:35px;    position:absolute;    left:171px;    top:304px;   }   #gear13{    background: url(FgFnjks.png) no-repeat 0 -744px;    width: 62px;    height: 62px;    position:absolute;    left:174px;    top:309px;      -webkit-animation: rotate 8000ms linear infinite;    -moz-animation: rotate 8000ms linear infinite;    -ms-animation: rotate 8000ms linear infinite;    animation: rotate 8000ms linear infinite;   }   #shadow13{    width:36px;    height:36px;    -webkit-border-radius:18px;    -moz-border-radius:18px;    border-radius:18px;    position:absolute;    left:187px;    top:322px;   }     /*gear-system-2*/  #gear10{    background: url(FgFnjks.png) no-repeat 0 -184px;    width: 122px;    height: 122px;    position:absolute;    left:175px;    top:0;      -webkit-animation: rotate-back 8000ms linear infinite;    -moz-animation: rotate-back 8000ms linear infinite;    -ms-animation: rotate-back 8000ms linear infinite;    animation: rotate-back 8000ms linear infinite;   }   #shadow10{    width:86px;    height:86px;    -webkit-border-radius:43px;    -moz-border-radius:43px;    border-radius:43px;    position:absolute;    left:193px;    top:18px;   }   #gear3{    background: url(FgFnjks.png) no-repeat 0 -1493px;    width: 85px;    height: 84px;    position:absolute;    left:194px;    top:19px;      -webkit-animation: rotate 10000ms linear infinite;    -moz-animation: rotate 10000ms linear infinite;    -ms-animation: rotate 10000ms linear infinite;    animation: rotate 10000ms linear infinite;   }   #shadow3{    width:60px;    height:60px;    -webkit-border-radius:30px;    -moz-border-radius:30px;    border-radius:30px;    position:absolute;    left:206px;    top:31px;   }     /*gear-system-3*/  #gear9{    background: url(FgFnjks.png) no-repeat -371px -280px;    width: 234px;    height: 234px;    position:absolute;    left:197px;    top:96px;      -webkit-animation: rotate 12000ms linear infinite;    -moz-animation: rotate 12000ms linear infinite;    -ms-animation: rotate 12000ms linear infinite;    animation: rotate 12000ms linear infinite;   }   #shadow9{    width:200px;    height:200px;    -webkit-border-radius:100px;    -moz-border-radius:100px;    border-radius:100px;    position:absolute;    left:214px;    top:113px;   }   #gear7{    background: url(FgFnjks.png) no-repeat -371px 0;    width: 108px;    height: 108px;    position:absolute;    left:260px;    top:159px;      -webkit-animation: rotate-back 10000ms linear infinite;    -moz-animation: rotate-back 10000ms linear infinite;    -ms-animation: rotate-back 10000ms linear infinite;    animation: rotate-back 10000ms linear infinite;   }   #shadow7{    width:76px;    height:76px;    -webkit-border-radius:38px;    -moz-border-radius: 38px;    border-radius: 38px;    position:absolute;    left:276px;    top:175px;   }     /*gear-system-4*/  #gear6{    background: url(FgFnjks.png) no-repeat 0 -1931px;    width: 134px;    height: 134px;    position:absolute;    left:305px;    bottombottom:212px;      -webkit-animation: rotate-back 10000ms linear infinite;    -moz-animation: rotate-back 10000ms linear infinite;    -ms-animation: rotate-back 10000ms linear infinite;    animation: rotate-back 10000ms linear infinite;   }   #shadow6{    width:98px;    height:98px;    -webkit-border-radius:49px;    -moz-border-radius: 49px;    border-radius: 49px;    position:absolute;    left:323px;    bottombottom:230px;   }   #gear4{    background: url(FgFnjks.png) no-repeat 0 -1627px;    width: 69px;    height: 69px;    position:absolute;    left:337px;    bottombottom:245px;      -webkit-animation: rotate-back 10000ms linear infinite;    -moz-animation: rotate-back 10000ms linear infinite;    -ms-animation: rotate-back 10000ms linear infinite;    animation: rotate-back 10000ms linear infinite;   }     /*gear-system-5*/  #gear12{    background: url(FgFnjks.png) no-repeat 0 -530px;    width: 164px;    height: 164px;    position:absolute;    left:208px;    bottombottom:85px;      -webkit-animation: rotate 8000ms linear infinite;    -moz-animation: rotate 8000ms linear infinite;    -ms-animation: rotate 8000ms linear infinite;    animation: rotate 8000ms linear infinite;   }   #shadow12{    width:124px;    height:124px;    -webkit-border-radius:62px;    -moz-border-radius:62px;    border-radius:62px;    position:absolute;    left:225px;    bottombottom:107px;   }   #gear11{    background: url(FgFnjks.png) no-repeat 0 -356px;    width: 125px;    height: 124px;    position:absolute;    left:228px;    bottombottom:105px;      -webkit-animation: rotate-back 10000ms linear infinite;    -moz-animation: rotate-back 10000ms linear infinite;    -ms-animation: rotate-back 10000ms linear infinite;    animation: rotate-back 10000ms linear infinite;   }   #shadow11{    width:88px;    height:88px;    -webkit-border-radius:44px;    -moz-border-radius:44px;    border-radius:44px;    position:absolute;    left:247px;    bottombottom:123px;   }   #gear8{    background: url(FgFnjks.png) no-repeat -371px -158px;    width: 72px;    height: 72px;    position:absolute;    left:254px;    bottombottom:131px;      -webkit-animation: rotate 6000ms linear infinite;    -moz-animation: rotate 6000ms linear infinite;    -ms-animation: rotate 6000ms linear infinite;    animation: rotate 6000ms linear infinite;   }   #shadow8{    width:42px;    height:42px;    -webkit-border-radius:21px;    -moz-border-radius: 21px;    border-radius: 21px;    position:absolute;    left:269px;    bottombottom:146px;   }     /*gear1*/  #gear1{    background: url(FgFnjks.png) no-repeat 0 0;    width: 135px;    height: 134px;    position:absolute;    left:83px;    bottombottom:111px;      -webkit-animation: rotate-back 10000ms linear infinite;    -moz-animation: rotate-back 10000ms linear infinite;    -ms-animation: rotate-back 10000ms linear infinite;    animation: rotate-back 10000ms linear infinite;   }   #shadow1{    width:96px;    height:96px;    -webkit-border-radius:48px;    -moz-border-radius:48px;    border-radius:48px;    position:absolute;    left:103px;    bottombottom:130px;   }     /*gear-system-6*/  #gear5{    background: url(FgFnjks.png) no-repeat 0 -1746px;    width: 134px;    height: 135px;    position:absolute;    left:22px;    top:108px;      -webkit-animation: rotate 10000ms linear infinite alternate;    -moz-animation: rotate 10000ms linear infinite alternate;    -ms-animation: rotate 10000ms linear infinite alternate;    animation: rotate 10000ms linear infinite alternate;   }   #shadow5{    width:96px;    height:96px;    -webkit-border-radius:48px;    -moz-border-radius:48px;    border-radius:48px;    position:absolute;    left:41px;    top:127px;   }   #gear2{    background: url(FgFnjks.png) no-repeat 0 -1364px;    width: 80px;    height: 79px;    position:absolute;    left:49px;    top:136px;      -webkit-animation: rotate-back 10000ms linear infinite alternate;    -moz-animation: rotate-back 10000ms linear infinite alternate;    -ms-animation: rotate-back 10000ms linear infinite alternate;    animation: rotate-back 10000ms linear infinite alternate;   }     /*weight*/  #weight{    background: url(FgFnjks.png) no-repeat -371px -564px;    width: 34px;    height: 92px;    position:absolute;    left:1px;    bottombottom:0;      -webkit-animation: up 10000ms linear infinite alternate;    -moz-animation: up 10000ms linear infinite alternate;    -ms-animation: up 10000ms linear infinite alternate;    animation: up 10000ms linear infinite alternate;   }   #shadowweight{    width:10px;    height:80px;    position:absolute;    left:12px;    bottombottom:0px;      -webkit-animation: up 10000ms linear infinite alternate;    -moz-animation: up 10000ms linear infinite alternate;    -ms-animation: up 10000ms linear infinite alternate;    animation: up 10000ms linear infinite alternate;   }     /*chain*/  #chain-circle{    background: url(FgFnjks.png) no-repeat -371px -706px;    width:146px;    height:147px;    position:absolute;    left:17px;    top:102px;      -webkit-animation: rotate 10000ms linear infinite alternate;    -moz-animation: rotate 10000ms linear infinite alternate;    -ms-animation: rotate 10000ms linear infinite alternate;    animation: rotate 10000ms linear infinite alternate;   }   #chain{    width:1px;    height:380px;    border-left:2px dotted #C8D94A;    position:absolute;    left:17px;    top:175px;    opacity:0.7;      -webkit-animation: collapse 10000ms linear infinite alternate;    -moz-animation: collapse 10000ms linear infinite alternate;    -ms-animation: collapse 10000ms linear infinite alternate;    animation: collapse 10000ms linear infinite alternate;   }     /*ANIMATIONS*/  /*rotate*/  @keyframes  rotate  {    from {    -webkit-transform: rotate(0deg);    -moz-transform: rotate(0deg);    -o-transform: rotate(0deg);    -ms-transform: rotate(0deg);    transform: rotate(0deg);    }    to {    -webkit-transform: rotate(360deg);    -moz-transform: rotate(360deg);    -o-transform: rotate(360deg);    -ms-transform: rotate(360deg);    transform: rotate(360deg);    }   }     @-moz-keyframes rotate {    from {    -moz-transform: rotate(0deg);    transform: rotate(0deg);    }    to {    -moz-transform: rotate(360deg);    transform: rotate(360deg);    }   }     @-webkit-keyframes  rotate  {    from {    -webkit-transform: rotate(0deg);    transform: rotate(0deg);    }    to {    -webkit-transform: rotate(360deg);    transform: rotate(360deg);    }   }     @-ms-keyframes  rotate  {    from {    -ms-transform: rotate(0deg);    transform: rotate(0deg);    }    to {    -ms-transform: rotate(360deg);    transform: rotate(360deg);    }   }     @-o-keyframes  rotate  {    from {    -o-transform: rotate(0deg);    transform: rotate(0deg);    }    to {    -o-transform: rotate(360deg);    transform: rotate(360deg);    }   }   /*rotate-back*/  @keyframes  rotate-back  {    from {    -webkit-transform: rotate(0deg);    -moz-transform: rotate(0deg);    -o-transform: rotate(0deg);    -ms-transform: rotate(0deg);    transform: rotate(0deg);    }    to {    -webkit-transform: rotate(-360deg);    -moz-transform: rotate(-360deg);    -o-transform: rotate(-360deg);    -ms-transform: rotate(-360deg);    transform: rotate(-360deg);    }   }     @-moz-keyframes rotate-back {    from {    -moz-transform: rotate(0deg);    transform: rotate(0deg);    }    to {    -moz-transform: rotate(-360deg);    transform: rotate(-360deg);    }   }     @-webkit-keyframes  rotate-back  {    from {    -webkit-transform: rotate(0deg);    transform: rotate(0deg);    }    to {    -webkit-transform: rotate(-360deg);    transform: rotate(-360deg);    }   }     @-ms-keyframes  rotate-back  {    from {    -ms-transform: rotate(0deg);    transform: rotate(0deg);    }    to {    -ms-transform: rotate(-360deg);    transform: rotate(-360deg);    }   }     @-o-keyframes  rotate-back  {    from {    -o-transform: rotate(0deg);    transform: rotate(0deg);    }    to {    -o-transform: rotate(-360deg);    transform: rotate(-360deg);    }   }   /*weight up*/  @keyframes  up  {    from {    bottombottom: 0px;    }    to {    bottombottom: 340px;    }   }     @-moz-keyframes up {    from {    bottombottom: 0px;    }    to {    bottombottom: 340px;    }   }     @-webkit-keyframes  up  {    from {    bottombottom: 0px;    }    to {    bottombottom: 340px;    }   }     @-ms-keyframes  up  {    from {    bottombottom: 0px;    }    to {    bottombottom: 340px;    }   }     @-o-keyframes  up  {    from {    bottombottom: 0px;    }    to {    bottombottom: 340px;    }   }   /*chain up and down*/  @keyframes  collapse  {    from {    height: 387px;    }    to {    height: 48px;    }   }     @-moz-keyframes collapse {    from {    height: 387px;    }    to {    height: 48px;    }   }     @-webkit-keyframes  collapse  {    from {    height: 387px;    }    to {    height: 48px;    }   }     @-ms-keyframes  collapse  {    from {    height: 387px;    }    to {    height: 48px;    }   }     @-o-keyframes  collapse  {    from {    height: 387px;    }    to {    height: 48px;    }   }  

这篇文章主要介绍了纯CSS3实现滚动的齿轮动画效果,主要用了transform进行旋转,keyframes关键帧等技术实现,需要的朋友可以参考下

css3实现转动的齿轮(chrome),代码简单实用,感兴趣的朋友可以参考下哈,希望对你有所帮助
上一篇:什么叫三合一建网站 返回下一篇:没有了