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

首页

web前端

H5教程

基于HTML5的齿轮动画特效_html5教程技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:45 PM

html5

这是一个基于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;

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素，一个元素会独占一行，两个div默认无法在同一行显示；但可以通过给div元素添加“display：inline;”样式，将其转为行内元素，就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别：1、表格主要是用于显示数据的，而列表主要是用于给数据进行布局；2、表格是使用table标签配合tr、td、th等标签进行定义的，列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法：1、使用header标签定义文档头部内容，并添加“position:fixed;top:0;”样式让其固定不动；2、使用footer标签定义尾部内容，并添加“position: fixed;bottom: 0;”样式让其固定不动。

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有：1、acronym，用于定义首字母缩写，可用abbr替代；2、basefont，可利用css样式替代；3、applet，可用object替代；4、dir，定义目录列表，可用ul替代；5、big，定义大号文本等等。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

html5是什么意思Apr 26, 2021 pm 03:02 PM

html5是指超文本标记语言（HTML）的第五次重大修改，即第5代HTML。HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。

Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。

See all articles