社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > H5教程 > 正文

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

WBOY
发布： 2016-05-16 15:45:54
原创
1589 人浏览过

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

HTML代码

XML/HTML Code复制内容到剪贴板
  1. div id="级别" >  
  2.  div id="内容" >  
  3.   div id=“齿轮” >  
  4.    div id=“齿轮-静态">div>  
  5.    div id="齿轮- system-1">  
  6.     div class="影子"  id="shadow15">div>  
  7.     div id=“齿轮15” >div>  
  8.     div class="影子"  id="shadow14">div>  
  9.     div id="gear14" >div>  
  10.     div class="影子"  id="shadow13">div>  
  11.     div id="gear13" >div>  
  12.    div>  
  13.    div id="齿轮- system-2">  
  14.     div class="影子"  id="shadow10">div>  
  15.     div id=“齿轮10” >div>  
  16.     div class="影子"  id="shadow3">div>  
  17.     div id=“齿轮3” >div>  
  18.    div>  
  19.    div id="齿轮- system-3">  
  20.     div class="影子"  id="shadow9">div>  
  21.     div id="gear9" >div>  
  22.     div class="影子"  id="shadow7">div>  
  23.     div id="gear7" >div>  
  24.    div>  
  25.    div id="齿轮- system-4">  
  26.     div class="影子"  id="shadow6">div>  
  27.     div id=“齿轮6” >div>  
  28.     div id=“齿轮4” >div>  
  29.    div>  
  30.    div id="齿轮- system-5">  
  31.     div class="影子"  id="shadow12">div>  
  32.     div id=“齿轮12” >div>  
  33.     div class="影子"  id="shadow11">div>  
  34.     div id="gear11" >div>  
  35.     div class="影子"  id="shadow8">div>  
  36.     div id="gear8" >div>  
  37.    div>  
  38.    div class="影子"  id="shadow1">div>  
  39.    div id=“齿轮1” >div>  
  40.    div id="齿轮- system-6">  
  41.     div class="影子"  id="shadow5">div>  
  42.     div id=“齿轮5” >div>  
  43.     div id=“齿轮2” >div>  
  44.    div>  
  45.    div class="影子"  id="shadowweight">div>  
  46.    div id="链-圆圈">div>  
  47.    div id="链" >div>  
  48.    div id="体重" >div>  
  49.   div>  
  50.  div>  
  51. div>  

CSS代码

CSS Code复制内容到剪贴板
  1. #level{   
  2.  宽度：100%；   
  3.  高度:1px;   
  4.  位置：绝对；   
  5.  顶部：50%；   
  6. }   
  7. #content{   
  8.  文本对齐:居中;   
  9.  页边距:-327px;   
  10. }   
  11. #gears{   
  12.  宽度:478px;   
  13.  高度:655px;   
  14.  职位：亲戚；   
  15.  显示:内联-块;   
  16.  垂直对齐:中间;   
  17. }   
  18. #gears-静态{   
  19.  背景:url(FgFnjks.png) 无重复  -363px -903px；   
  20.  宽度:329px;   
  21.  高度:602px;   
  22.  位置：绝对；   
  23.  底部底部:5px;   
  24.  右右:0px;   
  25.  不透明度：0.4；   
  26. }   
  27. #title{   
  28.  垂直对齐:中间;   
  29.  颜色:#9EB7B5;   
  30.  宽度：43%；   
  31.  显示:内联-块;   
  32. }  
  33. #title h1{   
  34.  字体系列: 'PTSansNarrowBold', sans-serif ；   
  35.  字体大小：3.6em；   
  36.  文本阴影:rgba(0, 0, 0, 0.36) 7px 7 像素 10 像素;   
  37. }   
  38. #title p{   
  39.  字体系列：无衬线；   
  40.  字体大小：1.2em；   
  41.  行高：148%；   
  42.  文本阴影:rgba(0, 0, 0, 0.36) 1px 1 像素 0 像素;   
  43. }   
  44.   
  45. .shadow{   
  46.  -webkit-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);   
  47.  -moz-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);   
  48.  方框阴影： 4px 7px 25px 10px rgba(43, 36, 0, 0.36);   
  49. }   
  50.   
  51. /*齿轮系统-1*/  
  52. #gear15{   
  53.  背景: url(FgFnjks.png) 无重复  0 -993px；   
  54.  宽度: 321px;   
  55.  高度: 321px;   
  56.  位置：绝对；   
  57.  左:45px;   
  58.  顶部:179px;   
  59.   
  60. -webkit-animation：向后旋转 24000ms 线性无限；   
  61. -moz-animation：向后旋转 24000ms 线性无限；   
  62. -ms-animation：向后旋转 24000ms 线性无限；   
  63.  动画：向后旋转 24000 毫秒线性无限；   
  64. }  
  65. #shadow15{   
  66.  宽度:306px;   
  67.  高度:306px;   
  68.  -webkit-边框-半径：153px；   
  69.  -moz-边框-半径：153px；   
  70.  边框-半径：153px；   
  71.  位置：绝对；   
  72.  左:52px;   
  73.  顶部:186px;   
  74. }   
  75. #gear14{   
  76.  背景: url(FgFnjks.png) 无重复  0 -856px;   
  77.  宽度: 87px;   
  78.  高度: 87px;   
  79.  位置：绝对；   
  80.  左:162px;   
  81.  顶部:296px;   
  82. }   
  83. #shadow14{   
  84.  宽度:70px;   
  85.  高度:70px;   
  86.  -webkit-边框-半径：35px；   
  87.  -moz-边框-半径：35px；   
  88.  边框-半径：35px；   
  89.  位置：绝对；   
  90.  左:171px;   
  91.  顶部:304px;   
  92. }  
  93. #gear13{   
  94.  背景: url(FgFnjks.png) 无重复  0 -744px；   
  95.  宽度: 62px;   
  96.  高度: 62px;   
  97.  位置：绝对；   
  98.  左:174px;   
  99.  顶部:309px;   
  100.   
  101. -webkit-animation：旋转 8000ms 线性无限；   
  102. -moz-animation：旋转 8000ms 线性无限；   
  103. -ms-animation：旋转 8000ms 线性无限；   
  104.  动画：旋转8000ms线性无限；   
  105. }   
  106. #shadow13{   
  107.  宽度:36px;   
  108.  高度:36px;   
  109.  -webkit-边框-半径：18px；   
  110.  -moz-边框-半径：18px；   
  111.  边框-半径：18px；   
  112.  位置：绝对；   
  113.  左:187px;   
  114.  顶部:322px;   
  115. }   
  116.   
  117. /*齿轮系统-2*/  
  118. #gear10{   
  119.  背景: url(FgFnjks.png) 无重复  0 -184px；   
  120.  宽度: 122px;   
  121.  高度: 122px;   
  122.  位置：绝对；   
  123.  左:175px;   
  124.  顶部:0;   
  125.   
  126. -webkit-animation：向后旋转 8000 毫秒线性无限；   
  127. -moz-animation：向后旋转 8000ms 线性无限；   
  128. -ms-animation：向后旋转 8000ms 线性无限；   
  129.  动画：向后旋转 8000 毫秒线性无限；   
  130. }  
  131. #shadow10{   
  132.  宽度:86px;   
  133.  高度:86px;   
  134.  -webkit-边框-半径：43px；   
  135.  -moz-边框-半径：43px；   
  136.  边框-半径：43px；   
  137.  位置：绝对；   
  138.  左:193px;   
  139.  顶部:18px;   
  140. }   
  141. #gear3{   
  142.  背景: url(FgFnjks.png) 无重复  0 -1493px;   
  143.  宽度：85px；   
  144.  高度: 84px;   
  145.  位置：绝对；   
  146.  左:194px;   
  147.  顶部:19px;   
  148.   
  149. -webkit-animation：旋转 10000ms 线性无限；   
  150. -moz-animation：旋转 10000ms 线性无限；   
  151.  -ms-animation：旋转 10000ms 线性无限；   
  152. 动画：旋转10000ms线性无限；   
  153. }   
  154. #shadow3{   
  155.  宽度:60px;   
  156.  高度:60px;   
  157.  -webkit-边框-半径：30px；   
  158.  -moz-边框-半径：30px；   
  159.  边框-半径：30px；   
  160.  位置：绝对；   
  161.  左:206px;   
  162.  顶部:31px;   
  163. }  
  164.   
  165. /*齿轮系统-3*/  
  166. #gear9{   
  167.  背景: url(FgFnjks.png) 无重复  -371 像素 -280 像素；   
  168.  宽度: 234px;   
  169.  高度：234px；   
  170.  位置：绝对；   
  171.  左:197px;   
  172.  顶部:96px;   
  173.   
  174. -webkit-animation：旋转 12000ms 线性无限；   
  175. -moz-animation：旋转 12000ms 线性无限；   
  176.  -ms-animation：旋转 12000ms 线性无限；   
  177.  动画：旋转12000ms线性无限；   
  178. }   
  179. #shadow9{   
  180.  宽度:200px;   
  181.  高度:200px;   
  182.  -webkit-边框-半径：100px；   
  183.  -moz-边框-半径：100px；   
  184.  边框-半径：100px；   
  185.  位置：绝对；   
  186.  左:214px;   
  187.  顶部:113px;   
  188. }   
  189. #gear7{   
  190.  背景: url(FgFnjks.png) 无重复  -371px 0；   
  191.  宽度: 108px;   
  192.  高度: 108px;   
  193.  位置：绝对；   
  194.  左:260px;   
  195.  顶部:159px;   
  196.   
  197. -webkit-animation：向后旋转 10000ms 线性无限；   
  198. -moz-animation：向后旋转 10000ms 线性无限；   
  199.  -ms-animation：向后旋转 10000ms 线性无限；   
  200.  动画：向后旋转 10000ms 线性无限；   
  201. }  
  202. #shadow7{   
  203.  宽度:76px;   
  204.  高度:76px;   
  205.  -webkit-边框-半径：38px；   
  206.  -moz-边框-半径：38px；   
  207.  边框-半径：38px；   
  208.  位置：绝对；   
  209.  左:276px;   
  210.  顶部:175px;   
  211. }   
  212.   
  213. /*齿轮系统-4*/  
  214. #gear6{   
  215.  背景: url(FgFnjks.png) 无重复  0 -1931px；   
  216.  宽度: 134px;   
  217.  高度: 134px;   
  218.  位置：绝对；   
  219.  左:305px;   
  220.  底部底部:212px;   
  221.   
  222. -webkit-animation：向后旋转 10000ms 线性无限；   
  223. -moz-animation：向后旋转 10000ms 线性无限；   
  224.  -ms-animation：向后旋转 10000ms 线性无限；   
  225.  动画：向后旋转 10000ms 线性无限；   
  226. }   
  227. #shadow6{   
  228.  宽度:98px;   
  229.  高度:98px;   
  230.  -webkit-边框-半径：49px；   
  231.  -moz-边框-半径：49px；   
  232.  边框-半径：49px；   
  233.  位置：绝对；   
  234.  左:323px;   
  235.  底部底部:230px;   
  236. }  
  237. #gear4{   
  238.  背景: url(FgFnjks.png) 无重复  0 -1627px;   
  239.  宽度: 69px;   
  240.  高度: 69px;   
  241.  位置：绝对；   
  242.  左:337px;   
  243.  底部底部:245px;   
  244.   
  245. -webkit-animation：向后旋转 10000ms 线性无限；   
  246. -moz-animation：向后旋转 10000ms 线性无限；   
  247.  -ms-animation：向后旋转 10000ms 线性无限；   
  248.  动画：向后旋转 10000ms 线性无限；   
  249. }   
  250.   
  251. /*齿轮系统-5*/  
  252. #gear12{   
  253.  背景: url(FgFnjks.png) 无重复  0 -530px；   
  254.  宽度: 164px;   
  255.  高度: 164px;   
  256.  位置：绝对；   
  257.  左:208px;   
  258.  底部底部:85px;   
  259.   
  260. -webkit-animation：旋转 8000ms 线性无限；   
  261. -moz-animation：旋转 8000ms 线性无限；   
  262. -ms-animation：旋转 8000ms 线性无限；   
  263.  动画：旋转8000ms线性无限；   
  264. }  
  265. #shadow12{   
  266.  宽度:124px;   
  267.  高度:124px;   
  268.  -webkit-边框-半径：62px；   
  269.  -moz-边框-半径：62px；   
  270.  边框-半径：62px；   
  271.  位置：绝对；   
  272.  左:225px;   
  273.  底部底部:107px;   
  274. }   
  275. #gear11{   
  276.  背景: url(FgFnjks.png) 无重复  0 -356px；   
  277.  宽度: 125px;   
  278.  高度: 124px;   
  279.  位置：绝对；   
  280.  左:228px;   
  281.  底部底部:105px;   
  282.   
  283. -webkit-animation：向后旋转 10000ms 线性无限；   
  284. -moz-animation：向后旋转 10000ms 线性无限；   
  285.  -ms-animation：向后旋转 10000ms 线性无限；   
  286.  动画：向后旋转 10000ms 线性无限；   
  287. }   
  288. #shadow11{   
  289.  宽度:88px;   
  290.  高度:88px;   
  291.  -webkit-边框-半径：44px；   
  292.  -moz-边框-半径：44px；   
  293.  边框-半径：44px；   
  294.  位置：绝对；   
  295.  左:247px;   
  296.  底部底部:123px;   
  297. }  
  298. #gear8{   
  299.  背景: url(FgFnjks.png) 无重复  -371 像素 -158 像素；   
  300.  宽度: 72px;   
  301.  高度: 72px;   
  302.  位置：绝对；   
  303.  左:254px;   
  304.  底部底部:131px;   
  305.   
  306. -webkit-animation：旋转 6000ms 线性无限；   
  307. -moz-animation：旋转 6000ms 线性无限；   
  308. -ms-animation：旋转 6000ms 线性无限；   
  309.  动画：旋转 6000ms 线性无限；   
  310. }   
  311. #shadow8{   
  312.  宽度:42px;   
  313.  高度:42px;   
  314.  -webkit-边框-半径：21px；   
  315.  -moz-边框-半径：21px；   
  316.  边框-半径：21px；   
  317.  位置：绝对；   
  318.  左:269px;   
  319.  底部底部:146px;   
  320. }  
  321.   
  322. /*gear1*/  
  323. #gear1{   
  324.  latar belakang: url(FgFnjks.png) tidak berulang  0 0;   
  325.  lebar: 135px;   
  326.  tinggi: 134px;   
  327.  kedudukan:mutlak;   
  328.  kiri:83px;   
  329.  bawahbawah:111px;   
  330.   
  331.  -webkit-animasi: putar balik 10000ms linear tak terhingga;   
  332.  -moz-animasi: putar-belakang 10000ms linear tak terhingga;   
  333.  -ms-animasi: putar-belakang 10000ms linear tak terhingga;   
  334.  animasi: putar ke belakang 10000ms linear tak terhingga;   
  335. }   
  336. #bayangan1{   
  337.  lebar:96px;   
  338.  tinggi:96px;   
  339.  -webkit-sempadan-jejari:48px;   
  340.  -moz-sempadan-jejari:48px;   
  341.  sempadan-jejari:48px;   
相关标签：
html5
来源：php.cn
上一篇：浅析HTML5的WebSocket与服务器推送事件_html5教程技巧 下一篇：详解HTML5中的Communication API基本使用方法_html5教程技巧
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
如何让我的图像显示在页面的主显示屏上？ 我想做的是使用NASAAPI接收一些照片。然后在我的网页的缩略图和主显示屏上显示这些照片。我只是弄清楚为什么代码不从缩略图中获取图像并将其显示在页面上。我还使用HTML5及以上版本...
来自于 2024-04-06 15:33:12
0
1
433
PDF文件能够运行HTML5和Javascript吗？ 我有一个愚蠢的想法，想尝试制作一个在任何计算机上都不会被阻止的程序，因为它将嵌入在PDF中（我听说Javascript可以在PDF中运行）。它将在PDF文件中运行HTML5和Jav...
来自于 2024-04-05 12:57:00
0
1
456
HTML5中的enctype和formenctype有什么区别？ 我只是想知道HTMLLivingStandard（又名新的HTML5规范）中的属性enctype和formenctype之间有什么区别？我一直在阅读《面向开发人员的HTML标准》，...
来自于 2024-04-02 11:47:56
0
1
275
使页面适合移动设备吗？ 我有很多网页和一些网站。问题是，我是一个初学者。我使用基本的html5和css3，但我不知道如何使它们放大、缩小并且适合移动设备。例如，这是我的页面之一和我的网站之一，您可以在其中...
来自于 2024-04-01 20:42:38
0
1
259
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板