这是一个基于HTML5的齿轮动画特效，我们将齿轮转动的物理学原理，转换为HTML5代码，在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成，这对齿轮传动的算法要求就大大提高了，而且我们并没有用JavaScript，而是纯CSS3实现的。
HTML代码
XML/HTML Code复制内容到剪贴板 <divid="level"> <divid="content"> <divid="gears"> <divid="gears-static"></div> <divid="gear-system-1"> <divclass="shadow"id="shadow15"></div> <divid="gear15"></div> <divclass="shadow"id="shadow14"></div> <divid="gear14"></div> <divclass="shadow"id="shadow13"></div> <divid="gear13"></div> </div> <divid="gear-system-2"> <divclass="shadow"id="shadow10"></div> <divid="gear10"></div> <divclass="shadow"id="shadow3"></div> <divid="gear3"></div> </div> <divid="gear-system-3"> <divclass="shadow"id="shadow9"></div> <divid="gear9"></div> <divclass="shadow"id="shadow7"></div> <divid="gear7"></div> </div> <divid="gear-system-4"> <divclass="shadow"id="shadow6"></div> <divid="gear6"></div> <divid="gear4"></div> </div> <divid="gear-system-5"> <divclass="shadow"id="shadow12"></div> <divid="gear12"></div> <divclass="shadow"id="shadow11"></div> <divid="gear11"></div> <divclass="shadow"id="shadow8"></div> <divid="gear8"></div> </div> <divclass="shadow"id="shadow1"></div> <divid="gear1"></div> <divid="gear-system-6"> <divclass="shadow"id="shadow5"></div> <divid="gear5"></div> <divid="gear2"></div> </div> <divclass="shadow"id="shadowweight"></div> <divid="chain-circle"></div> <divid="chain"></div> <divid="weight"></div> </div> </div> </div>
CSS代码
CSS Code复制内容到剪贴板 #level{ width:100%; height:1px; position:absolute; top:50%; } #content{ text-align:center; margin-top:-327px; } #gears{ width:478px; height:655px; position:relative; display:inline-block; vertical-align:middle; } #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; } #titleh1{ font-family:'PTSansNarrowBold',sans-serif; font-size:3.6em; text-shadow:rgba(0,0,0,0.36)7px7px10px; } #titlep{ font-family:sans-serif; font-size:1.2em; line-height:148%; text-shadow:rgba(0,0,0,0.36)1px1px0px; } .shadow{ -webkit-box-shadow:4px7px25px10pxrgba(43,36,0,0.36); -moz-box-shadow:4px7px25px10pxrgba(43,36,0,0.36); box-shadow:4px7px25px10pxrgba(43,36,0,0.36); } /*gear-system-1*/ #gear15{ background:url(FgFnjks.png)no-repeat0-993px; width:321px; height:321px; position:absolute; left:45px; top:179px; -webkit-animation:rotate-back24000mslinearinfinite; -moz-animation:rotate-back24000mslinearinfinite; -ms-animation:rotate-back24000mslinearinfinite; animation:rotate-back24000mslinearinfinite; } #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-repeat0-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-repeat0-744px; width:62px; height:62px; position:absolute; left:174px; top:309px; -webkit-animation:rotate8000mslinearinfinite; -moz-animation:rotate8000mslinearinfinite; -ms-animation:rotate8000mslinearinfinite; animation:rotate8000mslinearinfinite; } #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-repeat0-184px; width:122px; height:122px; position:absolute; left:175px; top:0; -webkit-animation:rotate-back8000mslinearinfinite; -moz-animation:rotate-back8000mslinearinfinite; -ms-animation:rotate-back8000mslinearinfinite; animation:rotate-back8000mslinearinfinite; } #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-repeat0-1493px; width:85px; height:84px; position:absolute; left:194px; top:19px; -webkit-animation:rotate10000mslinearinfinite; -moz-animation:rotate10000mslinearinfinite; -ms-animation:rotate10000mslinearinfinite; animation:rotate10000mslinearinfinite; } #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:rotate12000mslinearinfinite; -moz-animation:rotate12000mslinearinfinite; -ms-animation:rotate12000mslinearinfinite; animation:rotate12000mslinearinfinite; } #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-371px0; width:108px; height:108px; position:absolute; left:260px; top:159px; -webkit-animation:rotate-back10000mslinearinfinite; -moz-animation:rotate-back10000mslinearinfinite; -ms-animation:rotate-back10000mslinearinfinite; animation:rotate-back10000mslinearinfinite; } #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-repeat0-1931px; width:134px; height:134px; position:absolute; left:305px; bottombottom:212px; -webkit-animation:rotate-back10000mslinearinfinite; -moz-animation:rotate-back10000mslinearinfinite; -ms-animation:rotate-back10000mslinearinfinite; animation:rotate-back10000mslinearinfinite; } #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-repeat0-1627px; width:69px; height:69px; position:absolute; left:337px; bottombottom:245px; -webkit-animation:rotate-back10000mslinearinfinite; -moz-animation:rotate-back10000mslinearinfinite; -ms-animation:rotate-back10000mslinearinfinite; animation:rotate-back10000mslinearinfinite; } /*gear-system-5*/ #gear12{ background:url(FgFnjks.png)no-repeat0-530px; width:164px; height:164px; position:absolute; left:208px; bottombottom:85px; -webkit-animation:rotate8000mslinearinfinite; -moz-animation:rotate8000mslinearinfinite; -ms-animation:rotate8000mslinearinfinite; animation:rotate8000mslinearinfinite; } #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-repeat0-356px; width:125px; height:124px; position:absolute; left:228px; bottombottom:105px; -webkit-animation:rotate-back10000mslinearinfinite; -moz-animation:rotate-back10000mslinearinfinite; -ms-animation:rotate-back10000mslinearinfinite; animation:rotate-back10000mslinearinfinite; } #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:rotate6000mslinearinfinite; -moz-animation:rotate6000mslinearinfinite; -ms-animation:rotate6000mslinearinfinite; animation:rotate6000mslinearinfinite; } #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-repeat00; width:135px; height:134px; position:absolute; left:83px; bottombottom:111px; -webkit-animation:rotate-back10000mslinearinfinite; -moz-animation:rotate-back10000mslinearinfinite; -ms-animation:rotate-back10000mslinearinfinite; animation:rotate-back10000mslinearinfinite; } #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-repeat0-1746px; width:134px; height:135px; position:absolute; left:22px; top:108px; -webkit-animation:rotate10000mslinearinfinitealternate; -moz-animation:rotate10000mslinearinfinitealternate; -ms-animation:rotate10000mslinearinfinitealternate; animation:rotate10000mslinearinfinitealternate; } #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-repeat0-1364px; width:80px; height:79px; position:absolute; left:49px; top:136px; -webkit-animation:rotate-back10000mslinearinfinitealternate; -moz-animation:rotate-back10000mslinearinfinitealternate; -ms-animation:rotate-back10000mslinearinfinitealternate; animation:rotate-back10000mslinearinfinitealternate; } /*weight*/ #weight{ background:url(FgFnjks.png)no-repeat-371px-564px; width:34px; height:92px; position:absolute; left:1px; bottombottom:0; -webkit-animation:up10000mslinearinfinitealternate; -moz-animation:up10000mslinearinfinitealternate; -ms-animation:up10000mslinearinfinitealternate; animation:up10000mslinearinfinitealternate; } #shadowweight{ width:10px; height:80px; position:absolute; left:12px; bottombottom:0px; -webkit-animation:up10000mslinearinfinitealternate; -moz-animation:up10000mslinearinfinitealternate; -ms-animation:up10000mslinearinfinitealternate; animation:up10000mslinearinfinitealternate; } /*chain*/ #chain-circle{ background:url(FgFnjks.png)no-repeat-371px-706px; width:146px; height:147px; position:absolute; left:17px; top:102px; -webkit-animation:rotate10000mslinearinfinitealternate; -moz-animation:rotate10000mslinearinfinitealternate; -ms-animation:rotate10000mslinearinfinitealternate; animation:rotate10000mslinearinfinitealternate; } #chain{ width:1px; height:380px; border-left:2pxdotted#C8D94A; position:absolute; left:17px; top:175px; opacity:0.7; -webkit-animation:collapse10000mslinearinfinitealternate; -moz-animation:collapse10000mslinearinfinitealternate; -ms-animation:collapse10000mslinearinfinitealternate; animation:collapse10000mslinearinfinitealternate; } /*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-keyframesrotate{ 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-keyframesrotate-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); } } /*weightup*/ @keyframes"up"{ from{ bottombottom:0px; } to{ bottombottom:340px; } } @-moz-keyframesup{ 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; } } /*chainupanddown*/ @keyframes"collapse"{ from{ height:387px; } to{ height:48px; } } @-moz-keyframescollapse{ 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实现的齿轮动画特效，希望大家喜欢。
【基于HTML5的齿轮动画特效】相关文章：