基于HTML5的齿轮动画特效

2020-03-24 18:34:34

字体：大中小

来源：转载

供稿：网友

这是一个基于HTML5的齿轮动画特效，我们将齿轮转动的物理学原理，转换为HTML5代码，在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成，这对齿轮传动的算法要求就大大提高了，而且我们并没有用JavaScript，而是纯CSS3实现的。HTML代码XML/HTML Code复制内容到剪贴板
divid= gears-html' target='_blank'>static /div divid= 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; } #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;html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：HTML5 通信API 跨域门槛将不再高、数据推送也不再

下一篇：HTML教程-定义列表_0