基于HTML5的齿轮动画特效_html5教程技巧-H5教程-PHP中文网

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

HTML代码

XML/HTML Code复制内容到剪贴板

div id="级别" >
div id="内容" >
div id=“齿轮” >
div id=“齿轮-静态">div>
div id="齿轮- system-1">
div class="影子" id="shadow15">div>
div id=“齿轮15” >div>
div class="影子" id="shadow14">div>
div id="gear14" >div>
div class="影子" id="shadow13">div>
div id="gear13" >div>
div>
div id="齿轮- system-2">
div class="影子" id="shadow10">div>
div id=“齿轮10” >div>
div class="影子" id="shadow3">div>
div id=“齿轮3” >div>
div>
div id="齿轮- system-3">
div class="影子" id="shadow9">div>
div id="gear9" >div>
div class="影子" id="shadow7">div>
div id="gear7" >div>
div>
div id="齿轮- system-4">
div class="影子" id="shadow6">div>
div id=“齿轮6” >div>
div id=“齿轮4” >div>
div>
div id="齿轮- system-5">
div class="影子" id="shadow12">div>
div id=“齿轮12” >div>
div class="影子" id="shadow11">div>
div id="gear11" >div>
div class="影子" id="shadow8">div>
div id="gear8" >div>
div>
div class="影子" id="shadow1">div>
div id=“齿轮1” >div>
div id="齿轮- system-6">
div class="影子" id="shadow5">div>
div id=“齿轮5” >div>
div id=“齿轮2” >div>
div>
div class="影子" id="shadowweight">div>
div id="链-圆圈">div>
div id="链" >div>
div id="体重" >div>
div>
div>
div>

CSS代码

CSS Code复制内容到剪贴板

#level{
宽度：100%；
高度:1px;
位置：绝对；
顶部：50%；
}
#content{
文本对齐:居中;
页边距:-327px;
}
#gears{
宽度:478px;
高度:655px;
职位：亲戚；
显示:内联-块;
垂直对齐:中间;
}
#gears-静态{
背景:url(FgFnjks.png) 无重复 -363px -903px；
宽度:329px;
高度:602px;
位置：绝对；
底部底部:5px;
右右:0px;
不透明度：0.4；
}
#title{
垂直对齐:中间;
颜色:#9EB7B5;
宽度：43%；
显示:内联-块;
}
#title h1{
字体系列: 'PTSansNarrowBold', sans-serif ；
字体大小：3.6em；
文本阴影:rgba(0, 0, 0, 0.36) 7px 7 像素 10 像素;
}
#title p{
字体系列：无衬线；
字体大小：1.2em；
行高：148%；
文本阴影:rgba(0, 0, 0, 0.36) 1px 1 像素 0 像素;
}
.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);
方框阴影： 4px 7px 25px 10px rgba(43, 36, 0, 0.36);
}
/*齿轮系统-1*/
#gear15{
背景: url(FgFnjks.png) 无重复 0 -993px；
宽度: 321px;
高度: 321px;
位置：绝对；
左:45px;
顶部:179px;
-webkit-animation：向后旋转 24000ms 线性无限；
-moz-animation：向后旋转 24000ms 线性无限；
-ms-animation：向后旋转 24000ms 线性无限；
动画：向后旋转 24000 毫秒线性无限；
}
#shadow15{
宽度:306px;
高度:306px;
-webkit-边框-半径：153px；
-moz-边框-半径：153px；
边框-半径：153px；
位置：绝对；
左:52px;
顶部:186px;
}
#gear14{
背景: url(FgFnjks.png) 无重复 0 -856px;
宽度: 87px;
高度: 87px;
位置：绝对；
左:162px;
顶部:296px;
}
#shadow14{
宽度:70px;
高度:70px;
-webkit-边框-半径：35px；
-moz-边框-半径：35px；
边框-半径：35px；
位置：绝对；
左:171px;
顶部:304px;
}
#gear13{
背景: url(FgFnjks.png) 无重复 0 -744px；
宽度: 62px;
高度: 62px;
位置：绝对；
左:174px;
顶部:309px;
-webkit-animation：旋转 8000ms 线性无限；
-moz-animation：旋转 8000ms 线性无限；
-ms-animation：旋转 8000ms 线性无限；
动画：旋转8000ms线性无限；
}
#shadow13{
宽度:36px;
高度:36px;
-webkit-边框-半径：18px；
-moz-边框-半径：18px；
边框-半径：18px；
位置：绝对；
左:187px;
顶部:322px;
}
/*齿轮系统-2*/
#gear10{
背景: url(FgFnjks.png) 无重复 0 -184px；
宽度: 122px;
高度: 122px;
位置：绝对；
左:175px;
顶部:0;
-webkit-animation：向后旋转 8000 毫秒线性无限；
-moz-animation：向后旋转 8000ms 线性无限；
-ms-animation：向后旋转 8000ms 线性无限；
动画：向后旋转 8000 毫秒线性无限；
}
#shadow10{
宽度:86px;
高度:86px;
-webkit-边框-半径：43px；
-moz-边框-半径：43px；
边框-半径：43px；
位置：绝对；
左:193px;
顶部:18px;
}
#gear3{
背景: url(FgFnjks.png) 无重复 0 -1493px;
宽度：85px；
高度: 84px;
位置：绝对；
左:194px;
顶部:19px;
-webkit-animation：旋转 10000ms 线性无限；
-moz-animation：旋转 10000ms 线性无限；
-ms-animation：旋转 10000ms 线性无限；
动画：旋转10000ms线性无限；
}
#shadow3{
宽度:60px;
高度:60px;
-webkit-边框-半径：30px；
-moz-边框-半径：30px；
边框-半径：30px；
位置：绝对；
左:206px;
顶部:31px;
}
/*齿轮系统-3*/
#gear9{
背景: url(FgFnjks.png) 无重复 -371 像素 -280 像素；
宽度: 234px;
高度：234px；
位置：绝对；
左:197px;
顶部:96px;
-webkit-animation：旋转 12000ms 线性无限；
-moz-animation：旋转 12000ms 线性无限；
-ms-animation：旋转 12000ms 线性无限；
动画：旋转12000ms线性无限；
}
#shadow9{
宽度:200px;
高度:200px;
-webkit-边框-半径：100px；
-moz-边框-半径：100px；
边框-半径：100px；
位置：绝对；
左:214px;
顶部:113px;
}
#gear7{
背景: url(FgFnjks.png) 无重复 -371px 0；
宽度: 108px;
高度: 108px;
位置：绝对；
左:260px;
顶部:159px;
-webkit-animation：向后旋转 10000ms 线性无限；
-moz-animation：向后旋转 10000ms 线性无限；
-ms-animation：向后旋转 10000ms 线性无限；
动画：向后旋转 10000ms 线性无限；
}
#shadow7{
宽度:76px;
高度:76px;
-webkit-边框-半径：38px；
-moz-边框-半径：38px；
边框-半径：38px；
位置：绝对；
左:276px;
顶部:175px;
}
/*齿轮系统-4*/
#gear6{
背景: url(FgFnjks.png) 无重复 0 -1931px；
宽度: 134px;
高度: 134px;
位置：绝对；
左:305px;
底部底部:212px;
-webkit-animation：向后旋转 10000ms 线性无限；
-moz-animation：向后旋转 10000ms 线性无限；
-ms-animation：向后旋转 10000ms 线性无限；
动画：向后旋转 10000ms 线性无限；
}
#shadow6{
宽度:98px;
高度:98px;
-webkit-边框-半径：49px；
-moz-边框-半径：49px；
边框-半径：49px；
位置：绝对；
左:323px;
底部底部:230px;
}
#gear4{
背景: url(FgFnjks.png) 无重复 0 -1627px;
宽度: 69px;
高度: 69px;
位置：绝对；
左:337px;
底部底部:245px;
-webkit-animation：向后旋转 10000ms 线性无限；
-moz-animation：向后旋转 10000ms 线性无限；
-ms-animation：向后旋转 10000ms 线性无限；
动画：向后旋转 10000ms 线性无限；
}
/*齿轮系统-5*/
#gear12{
背景: url(FgFnjks.png) 无重复 0 -530px；
宽度: 164px;
高度: 164px;
位置：绝对；
左:208px;
底部底部:85px;
-webkit-animation：旋转 8000ms 线性无限；
-moz-animation：旋转 8000ms 线性无限；
-ms-animation：旋转 8000ms 线性无限；
动画：旋转8000ms线性无限；
}
#shadow12{
宽度:124px;
高度:124px;
-webkit-边框-半径：62px；
-moz-边框-半径：62px；
边框-半径：62px；
位置：绝对；
左:225px;
底部底部:107px;
}
#gear11{
背景: url(FgFnjks.png) 无重复 0 -356px；
宽度: 125px;
高度: 124px;
位置：绝对；
左:228px;
底部底部:105px;
-webkit-animation：向后旋转 10000ms 线性无限；
-moz-animation：向后旋转 10000ms 线性无限；
-ms-animation：向后旋转 10000ms 线性无限；
动画：向后旋转 10000ms 线性无限；
}
#shadow11{
宽度:88px;
高度:88px;
-webkit-边框-半径：44px；
-moz-边框-半径：44px；
边框-半径：44px；
位置：绝对；
左:247px;
底部底部:123px;
}
#gear8{
背景: url(FgFnjks.png) 无重复 -371 像素 -158 像素；
宽度: 72px;
高度: 72px;
位置：绝对；
左:254px;
底部底部:131px;
-webkit-animation：旋转 6000ms 线性无限；
-moz-animation：旋转 6000ms 线性无限；
-ms-animation：旋转 6000ms 线性无限；
动画：旋转 6000ms 线性无限；
}
#shadow8{
宽度:42px;
高度:42px;
-webkit-边框-半径：21px；
-moz-边框-半径：21px；
边框-半径：21px；
位置：绝对；
左:269px;
底部底部:146px;
}
/*gear1*/
#gear1{
latar belakang: url(FgFnjks.png) tidak berulang 0 0;
lebar: 135px;
tinggi: 134px;
kedudukan:mutlak;
kiri:83px;
bawahbawah:111px;
-webkit-animasi: putar balik 10000ms linear tak terhingga;
-moz-animasi: putar-belakang 10000ms linear tak terhingga;
-ms-animasi: putar-belakang 10000ms linear tak terhingga;
animasi: putar ke belakang 10000ms linear tak terhingga;
}
#bayangan1{
lebar:96px;
tinggi:96px;
-webkit-sempadan-jejari:48px;
-moz-sempadan-jejari:48px;
sempadan-jejari:48px;