首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

基于HTML5的齿轮动画特效

Posted in HTML / CSS onFebruary 29, 2016

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

基于HTML5的齿轮动画特效

HTML代码

XML/HTML Code复制内容到剪贴板
  1. <div id="level">  
  2.  <div id="content">  
  3.   <div id="gears">  
  4.    <div id="gears-static"></div>  
  5.    <div id="gear-system-1">  
  6.     <div class="shadow" id="shadow15"></div>  
  7.     <div id="gear15"></div>  
  8.     <div class="shadow" id="shadow14"></div>  
  9.     <div id="gear14"></div>  
  10.     <div class="shadow" id="shadow13"></div>  
  11.     <div id="gear13"></div>  
  12.    </div>  
  13.    <div id="gear-system-2">  
  14.     <div class="shadow" id="shadow10"></div>  
  15.     <div id="gear10"></div>  
  16.     <div class="shadow" id="shadow3"></div>  
  17.     <div id="gear3"></div>  
  18.    </div>  
  19.    <div id="gear-system-3">  
  20.     <div class="shadow" id="shadow9"></div>  
  21.     <div id="gear9"></div>  
  22.     <div class="shadow" id="shadow7"></div>  
  23.     <div id="gear7"></div>  
  24.    </div>  
  25.    <div id="gear-system-4">  
  26.     <div class="shadow" id="shadow6"></div>  
  27.     <div id="gear6"></div>  
  28.     <div id="gear4"></div>  
  29.    </div>  
  30.    <div id="gear-system-5">  
  31.     <div class="shadow" id="shadow12"></div>  
  32.     <div id="gear12"></div>  
  33.     <div class="shadow" id="shadow11"></div>  
  34.     <div id="gear11"></div>  
  35.     <div class="shadow" id="shadow8"></div>  
  36.     <div id="gear8"></div>  
  37.    </div>  
  38.    <div class="shadow" id="shadow1"></div>  
  39.    <div id="gear1"></div>  
  40.    <div id="gear-system-6">  
  41.     <div class="shadow" id="shadow5"></div>  
  42.     <div id="gear5"></div>  
  43.     <div id="gear2"></div>  
  44.    </div>  
  45.    <div class="shadow" id="shadowweight"></div>  
  46.    <div id="chain-circle"></div>  
  47.    <div id="chain"></div>  
  48.    <div id="weight"></div>  
  49.   </div>  
  50.  </div>  
  51. </div>  

CSS代码

CSS Code复制内容到剪贴板
  1. #level{   
  2.  width:100%;   
  3.  height:1px;   
  4.  position:absolute;   
  5.  top:50%;   
  6. }   
  7. #content{   
  8.  text-align:center;   
  9.  margin-top:-327px;   
  10. }   
  11. #gears{   
  12.  width:478px;   
  13.  height:655px;   
  14.  position:relative;   
  15.  display:inline-block;   
  16.  vertical-align:middle;   
  17. }   
  18. #gears-static{   
  19.  background:url(FgFnjks.png) no-repeat -363px -903px;   
  20.  width:329px;   
  21.  height:602px;   
  22.  position:absolute;   
  23.  bottombottom:5px;   
  24.  rightright:0px;   
  25.  opacity:0.4;   
  26. }   
  27. #title{   
  28.  vertical-align:middle;   
  29.  color:#9EB7B5;   
  30.  width:43%;   
  31.  display:inline-block;   
  32. }   
  33. #title h1{   
  34.  font-family: 'PTSansNarrowBold', sans-serif;   
  35.  font-size:3.6em;   
  36.  text-shadow:rgba(0, 0, 0, 0.36) 7px 7px 10px;   
  37. }   
  38. #title p{   
  39.  font-family: sans-serif;   
  40.  font-size:1.2em;   
  41.  line-height:148%;   
  42.  text-shadow:rgba(0, 0, 0, 0.36) 1px 1px 0px;   
  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.  box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);   
  49. }   
  50.   
  51. /*gear-system-1*/  
  52. #gear15{   
  53.  background: url(FgFnjks.png) no-repeat 0 -993px;   
  54.  width: 321px;   
  55.  height: 321px;   
  56.  position:absolute;   
  57.  left:45px;   
  58.  top:179px;   
  59.   
  60.  -webkit-animation: rotate-back 24000ms linear infinite;   
  61.  -moz-animation: rotate-back 24000ms linear infinite;   
  62.  -ms-animation: rotate-back 24000ms linear infinite;   
  63.  animation: rotate-back 24000ms linear infinite;   
  64. }   
  65. #shadow15{   
  66.  width:306px;   
  67.  height:306px;   
  68.  -webkit-border-radius:153px;   
  69.  -moz-border-radius:153px;   
  70.  border-radius:153px;   
  71.  position:absolute;   
  72.  left:52px;   
  73.  top:186px;   
  74. }   
  75. #gear14{   
  76.  background: url(FgFnjks.png) no-repeat 0 -856px;   
  77.  width: 87px;   
  78.  height: 87px;   
  79.  position:absolute;   
  80.  left:162px;   
  81.  top:296px;   
  82. }   
  83. #shadow14{   
  84.  width:70px;   
  85.  height:70px;   
  86.  -webkit-border-radius:35px;   
  87.  -moz-border-radius:35px;   
  88.  border-radius:35px;   
  89.  position:absolute;   
  90.  left:171px;   
  91.  top:304px;   
  92. }   
  93. #gear13{   
  94.  background: url(FgFnjks.png) no-repeat 0 -744px;   
  95.  width: 62px;   
  96.  height: 62px;   
  97.  position:absolute;   
  98.  left:174px;   
  99.  top:309px;   
  100.   
  101.  -webkit-animation: rotate 8000ms linear infinite;   
  102.  -moz-animation: rotate 8000ms linear infinite;   
  103.  -ms-animation: rotate 8000ms linear infinite;   
  104.  animation: rotate 8000ms linear infinite;   
  105. }   
  106. #shadow13{   
  107.  width:36px;   
  108.  height:36px;   
  109.  -webkit-border-radius:18px;   
  110.  -moz-border-radius:18px;   
  111.  border-radius:18px;   
  112.  position:absolute;   
  113.  left:187px;   
  114.  top:322px;   
  115. }   
  116.   
  117. /*gear-system-2*/  
  118. #gear10{   
  119.  background: url(FgFnjks.png) no-repeat 0 -184px;   
  120.  width: 122px;   
  121.  height: 122px;   
  122.  position:absolute;   
  123.  left:175px;   
  124.  top:0;   
  125.   
  126.  -webkit-animation: rotate-back 8000ms linear infinite;   
  127.  -moz-animation: rotate-back 8000ms linear infinite;   
  128.  -ms-animation: rotate-back 8000ms linear infinite;   
  129.  animation: rotate-back 8000ms linear infinite;   
  130. }   
  131. #shadow10{   
  132.  width:86px;   
  133.  height:86px;   
  134.  -webkit-border-radius:43px;   
  135.  -moz-border-radius:43px;   
  136.  border-radius:43px;   
  137.  position:absolute;   
  138.  left:193px;   
  139.  top:18px;   
  140. }   
  141. #gear3{   
  142.  background: url(FgFnjks.png) no-repeat 0 -1493px;   
  143.  width: 85px;   
  144.  height: 84px;   
  145.  position:absolute;   
  146.  left:194px;   
  147.  top:19px;   
  148.   
  149.  -webkit-animation: rotate 10000ms linear infinite;   
  150.  -moz-animation: rotate 10000ms linear infinite;   
  151.  -ms-animation: rotate 10000ms linear infinite;   
  152.  animation: rotate 10000ms linear infinite;   
  153. }   
  154. #shadow3{   
  155.  width:60px;   
  156.  height:60px;   
  157.  -webkit-border-radius:30px;   
  158.  -moz-border-radius:30px;   
  159.  border-radius:30px;   
  160.  position:absolute;   
  161.  left:206px;   
  162.  top:31px;   
  163. }   
  164.   
  165. /*gear-system-3*/  
  166. #gear9{   
  167.  background: url(FgFnjks.png) no-repeat -371px -280px;   
  168.  width: 234px;   
  169.  height: 234px;   
  170.  position:absolute;   
  171.  left:197px;   
  172.  top:96px;   
  173.   
  174.  -webkit-animation: rotate 12000ms linear infinite;   
  175.  -moz-animation: rotate 12000ms linear infinite;   
  176.  -ms-animation: rotate 12000ms linear infinite;   
  177.  animation: rotate 12000ms linear infinite;   
  178. }   
  179. #shadow9{   
  180.  width:200px;   
  181.  height:200px;   
  182.  -webkit-border-radius:100px;   
  183.  -moz-border-radius:100px;   
  184.  border-radius:100px;   
  185.  position:absolute;   
  186.  left:214px;   
  187.  top:113px;   
  188. }   
  189. #gear7{   
  190.  background: url(FgFnjks.png) no-repeat -371px 0;   
  191.  width: 108px;   
  192.  height: 108px;   
  193.  position:absolute;   
  194.  left:260px;   
  195.  top:159px;   
  196.   
  197.  -webkit-animation: rotate-back 10000ms linear infinite;   
  198.  -moz-animation: rotate-back 10000ms linear infinite;   
  199.  -ms-animation: rotate-back 10000ms linear infinite;   
  200.  animation: rotate-back 10000ms linear infinite;   
  201. }   
  202. #shadow7{   
  203.  width:76px;   
  204.  height:76px;   
  205.  -webkit-border-radius:38px;   
  206.  -moz-border-radius: 38px;   
  207.  border-radius: 38px;   
  208.  position:absolute;   
  209.  left:276px;   
  210.  top:175px;   
  211. }   
  212.   
  213. /*gear-system-4*/  
  214. #gear6{   
  215.  background: url(FgFnjks.png) no-repeat 0 -1931px;   
  216.  width: 134px;   
  217.  height: 134px;   
  218.  position:absolute;   
  219.  left:305px;   
  220.  bottombottom:212px;   
  221.   
  222.  -webkit-animation: rotate-back 10000ms linear infinite;   
  223.  -moz-animation: rotate-back 10000ms linear infinite;   
  224.  -ms-animation: rotate-back 10000ms linear infinite;   
  225.  animation: rotate-back 10000ms linear infinite;   
  226. }   
  227. #shadow6{   
  228.  width:98px;   
  229.  height:98px;   
  230.  -webkit-border-radius:49px;   
  231.  -moz-border-radius: 49px;   
  232.  border-radius: 49px;   
  233.  position:absolute;   
  234.  left:323px;   
  235.  bottombottom:230px;   
  236. }   
  237. #gear4{   
  238.  background: url(FgFnjks.png) no-repeat 0 -1627px;   
  239.  width: 69px;   
  240.  height: 69px;   
  241.  position:absolute;   
  242.  left:337px;   
  243.  bottombottom:245px;   
  244.   
  245.  -webkit-animation: rotate-back 10000ms linear infinite;   
  246.  -moz-animation: rotate-back 10000ms linear infinite;   
  247.  -ms-animation: rotate-back 10000ms linear infinite;   
  248.  animation: rotate-back 10000ms linear infinite;   
  249. }   
  250.   
  251. /*gear-system-5*/  
  252. #gear12{   
  253.  background: url(FgFnjks.png) no-repeat 0 -530px;   
  254.  width: 164px;   
  255.  height: 164px;   
  256.  position:absolute;   
  257.  left:208px;   
  258.  bottombottom:85px;   
  259.   
  260.  -webkit-animation: rotate 8000ms linear infinite;   
  261.  -moz-animation: rotate 8000ms linear infinite;   
  262.  -ms-animation: rotate 8000ms linear infinite;   
  263.  animation: rotate 8000ms linear infinite;   
  264. }   
  265. #shadow12{   
  266.  width:124px;   
  267.  height:124px;   
  268.  -webkit-border-radius:62px;   
  269.  -moz-border-radius:62px;   
  270.  border-radius:62px;   
  271.  position:absolute;   
  272.  left:225px;   
  273.  bottombottom:107px;   
  274. }   
  275. #gear11{   
  276.  background: url(FgFnjks.png) no-repeat 0 -356px;   
  277.  width: 125px;   
  278.  height: 124px;   
  279.  position:absolute;   
  280.  left:228px;   
  281.  bottombottom:105px;   
  282.   
  283.  -webkit-animation: rotate-back 10000ms linear infinite;   
  284.  -moz-animation: rotate-back 10000ms linear infinite;   
  285.  -ms-animation: rotate-back 10000ms linear infinite;   
  286.  animation: rotate-back 10000ms linear infinite;   
  287. }   
  288. #shadow11{   
  289.  width:88px;   
  290.  height:88px;   
  291.  -webkit-border-radius:44px;   
  292.  -moz-border-radius:44px;   
  293.  border-radius:44px;   
  294.  position:absolute;   
  295.  left:247px;   
  296.  bottombottom:123px;   
  297. }   
  298. #gear8{   
  299.  background: url(FgFnjks.png) no-repeat -371px -158px;   
  300.  width: 72px;   
  301.  height: 72px;   
  302.  position:absolute;   
  303.  left:254px;   
  304.  bottombottom:131px;   
  305.   
  306.  -webkit-animation: rotate 6000ms linear infinite;   
  307.  -moz-animation: rotate 6000ms linear infinite;   
  308.  -ms-animation: rotate 6000ms linear infinite;   
  309.  animation: rotate 6000ms linear infinite;   
  310. }   
  311. #shadow8{   
  312.  width:42px;   
  313.  height:42px;   
  314.  -webkit-border-radius:21px;   
  315.  -moz-border-radius: 21px;   
  316.  border-radius: 21px;   
  317.  position:absolute;   
  318.  left:269px;   
  319.  bottombottom:146px;   
  320. }   
  321.   
  322. /*gear1*/  
  323. #gear1{   
  324.  background: url(FgFnjks.png) no-repeat 0 0;   
  325.  width: 135px;   
  326.  height: 134px;   
  327.  position:absolute;   
  328.  left:83px;   
  329.  bottombottom:111px;   
  330.   
  331.  -webkit-animation: rotate-back 10000ms linear infinite;   
  332.  -moz-animation: rotate-back 10000ms linear infinite;   
  333.  -ms-animation: rotate-back 10000ms linear infinite;   
  334.  animation: rotate-back 10000ms linear infinite;   
  335. }   
  336. #shadow1{   
  337.  width:96px;   
  338.  height:96px;   
  339.  -webkit-border-radius:48px;   
  340.  -moz-border-radius:48px;   
  341.  border-radius:48px;   
  342.  position:absolute;   
  343.  left:103px;   
  344.  bottombottom:130px;   
  345. }   
  346.   
  347. /*gear-system-6*/  
  348. #gear5{   
  349.  background: url(FgFnjks.png) no-repeat 0 -1746px;   
  350.  width: 134px;   
  351.  height: 135px;   
  352.  position:absolute;   
  353.  left:22px;   
  354.  top:108px;   
  355.   
  356.  -webkit-animation: rotate 10000ms linear infinite alternate;   
  357.  -moz-animation: rotate 10000ms linear infinite alternate;   
  358.  -ms-animation: rotate 10000ms linear infinite alternate;   
  359.  animation: rotate 10000ms linear infinite alternate;   
  360. }   
  361. #shadow5{   
  362.  width:96px;   
  363.  height:96px;   
  364.  -webkit-border-radius:48px;   
  365.  -moz-border-radius:48px;   
  366.  border-radius:48px;   
  367.  position:absolute;   
  368.  left:41px;   
  369.  top:127px;   
  370. }   
  371. #gear2{   
  372.  background: url(FgFnjks.png) no-repeat 0 -1364px;   
  373.  width: 80px;   
  374.  height: 79px;   
  375.  position:absolute;   
  376.  left:49px;   
  377.  top:136px;   
  378.   
  379.  -webkit-animation: rotate-back 10000ms linear infinite alternate;   
  380.  -moz-animation: rotate-back 10000ms linear infinite alternate;   
  381.  -ms-animation: rotate-back 10000ms linear infinite alternate;   
  382.  animation: rotate-back 10000ms linear infinite alternate;   
  383. }   
  384.   
  385. /*weight*/  
  386. #weight{   
  387.  background: url(FgFnjks.png) no-repeat -371px -564px;   
  388.  width: 34px;   
  389.  height: 92px;   
  390.  position:absolute;   
  391.  left:1px;   
  392.  bottombottom:0;   
  393.   
  394.  -webkit-animation: up 10000ms linear infinite alternate;   
  395.  -moz-animation: up 10000ms linear infinite alternate;   
  396.  -ms-animation: up 10000ms linear infinite alternate;   
  397.  animation: up 10000ms linear infinite alternate;   
  398. }   
  399. #shadowweight{   
  400.  width:10px;   
  401.  height:80px;   
  402.  position:absolute;   
  403.  left:12px;   
  404.  bottombottom:0px;   
  405.   
  406.  -webkit-animation: up 10000ms linear infinite alternate;   
  407.  -moz-animation: up 10000ms linear infinite alternate;   
  408.  -ms-animation: up 10000ms linear infinite alternate;   
  409.  animation: up 10000ms linear infinite alternate;   
  410. }   
  411.   
  412. /*chain*/  
  413. #chain-circle{   
  414.  background: url(FgFnjks.png) no-repeat -371px -706px;   
  415.  width:146px;   
  416.  height:147px;   
  417.  position:absolute;   
  418.  left:17px;   
  419.  top:102px;   
  420.   
  421.  -webkit-animation: rotate 10000ms linear infinite alternate;   
  422.  -moz-animation: rotate 10000ms linear infinite alternate;   
  423.  -ms-animation: rotate 10000ms linear infinite alternate;   
  424.  animation: rotate 10000ms linear infinite alternate;   
  425. }   
  426. #chain{   
  427.  width:1px;   
  428.  height:380px;   
  429.  border-left:2px dotted #C8D94A;   
  430.  position:absolute;   
  431.  left:17px;   
  432.  top:175px;   
  433.  opacity:0.7;   
  434.   
  435.  -webkit-animation: collapse 10000ms linear infinite alternate;   
  436.  -moz-animation: collapse 10000ms linear infinite alternate;   
  437.  -ms-animation: collapse 10000ms linear infinite alternate;   
  438.  animation: collapse 10000ms linear infinite alternate;   
  439. }   
  440.   
  441. /*ANIMATIONS*/  
  442. /*rotate*/  
  443. @keyframes "rotate" {   
  444.  from {   
  445.     -webkit-transform: rotate(0deg);   
  446.     -moz-transform: rotate(0deg);   
  447.     -o-transform: rotate(0deg);   
  448.     -ms-transform: rotate(0deg);   
  449.     transform: rotate(0deg);   
  450.  }   
  451.  to {   
  452.     -webkit-transform: rotate(360deg);   
  453.     -moz-transform: rotate(360deg);   
  454.     -o-transform: rotate(360deg);   
  455.     -ms-transform: rotate(360deg);   
  456.     transform: rotate(360deg);   
  457.  }   
  458. }   
  459.   
  460. @-moz-keyframes rotate {   
  461.  from {   
  462.    -moz-transform: rotate(0deg);   
  463.    transform: rotate(0deg);   
  464.  }   
  465.  to {   
  466.    -moz-transform: rotate(360deg);   
  467.    transform: rotate(360deg);   
  468.  }   
  469. }   
  470.   
  471. @-webkit-keyframes "rotate" {   
  472.  from {   
  473.    -webkit-transform: rotate(0deg);   
  474.    transform: rotate(0deg);   
  475.  }   
  476.  to {   
  477.    -webkit-transform: rotate(360deg);   
  478.    transform: rotate(360deg);   
  479.  }   
  480. }   
  481.   
  482. @-ms-keyframes "rotate" {   
  483.  from {   
  484.    -ms-transform: rotate(0deg);   
  485.    transform: rotate(0deg);   
  486.  }   
  487.  to {   
  488.    -ms-transform: rotate(360deg);   
  489.    transform: rotate(360deg);   
  490.  }   
  491. }   
  492.   
  493. @-o-keyframes "rotate" {   
  494.  from {   
  495.    -o-transform: rotate(0deg);   
  496.    transform: rotate(0deg);   
  497.  }   
  498.  to {   
  499.    -o-transform: rotate(360deg);   
  500.    transform: rotate(360deg);   
  501.  }   
  502. }   
  503. /*rotate-back*/  
  504. @keyframes "rotate-back" {   
  505.  from {   
  506.     -webkit-transform: rotate(0deg);   
  507.     -moz-transform: rotate(0deg);   
  508.     -o-transform: rotate(0deg);   
  509.     -ms-transform: rotate(0deg);   
  510.     transform: rotate(0deg);   
  511.  }   
  512.  to {   
  513.     -webkit-transform: rotate(-360deg);   
  514.     -moz-transform: rotate(-360deg);   
  515.     -o-transform: rotate(-360deg);   
  516.     -ms-transform: rotate(-360deg);   
  517.     transform: rotate(-360deg);   
  518.  }   
  519. }   
  520.   
  521. @-moz-keyframes rotate-back {   
  522.  from {   
  523.    -moz-transform: rotate(0deg);   
  524.    transform: rotate(0deg);   
  525.  }   
  526.  to {   
  527.    -moz-transform: rotate(-360deg);   
  528.    transform: rotate(-360deg);   
  529.  }   
  530. }   
  531.   
  532. @-webkit-keyframes "rotate-back" {   
  533.  from {   
  534.    -webkit-transform: rotate(0deg);   
  535.    transform: rotate(0deg);   
  536.  }   
  537.  to {   
  538.    -webkit-transform: rotate(-360deg);   
  539.    transform: rotate(-360deg);   
  540.  }   
  541. }   
  542.   
  543. @-ms-keyframes "rotate-back" {   
  544.  from {   
  545.    -ms-transform: rotate(0deg);   
  546.    transform: rotate(0deg);   
  547.  }   
  548.  to {   
  549.    -ms-transform: rotate(-360deg);   
  550.    transform: rotate(-360deg);   
  551.  }   
  552. }   
  553.   
  554. @-o-keyframes "rotate-back" {   
  555.  from {   
  556.    -o-transform: rotate(0deg);   
  557.    transform: rotate(0deg);   
  558.  }   
  559.  to {   
  560.    -o-transform: rotate(-360deg);   
  561.    transform: rotate(-360deg);   
  562.  }   
  563. }   
  564. /*weight up*/  
  565. @keyframes "up" {   
  566.  from {   
  567.     bottombottom: 0px;   
  568.  }   
  569.  to {   
  570.     bottombottom: 340px;   
  571.  }   
  572. }   
  573.   
  574. @-moz-keyframes up {   
  575.  from {   
  576.    bottombottom: 0px;   
  577.  }   
  578.  to {   
  579.    bottombottom: 340px;   
  580.  }   
  581. }   
  582.   
  583. @-webkit-keyframes "up" {   
  584.  from {   
  585.    bottombottom: 0px;   
  586.  }   
  587.  to {   
  588.    bottombottom: 340px;   
  589.  }   
  590. }   
  591.   
  592. @-ms-keyframes "up" {   
  593.  from {   
  594.    bottombottom: 0px;   
  595.  }   
  596.  to {   
  597.    bottombottom: 340px;   
  598.  }   
  599. }   
  600.   
  601. @-o-keyframes "up" {   
  602.  from {   
  603.    bottombottom: 0px;   
  604.  }   
  605.  to {   
  606.    bottombottom: 340px;   
  607.  }   
  608. }   
  609. /*chain up and down*/  
  610. @keyframes "collapse" {   
  611.  from {   
  612.     height: 387px;   
  613.  }   
  614.  to {   
  615.     height: 48px;   
  616.  }   
  617. }   
  618.   
  619. @-moz-keyframes collapse {   
  620.  from {   
  621.    height: 387px;   
  622.  }   
  623.  to {   
  624.    height: 48px;   
  625.  }   
  626. }   
  627.   
  628. @-webkit-keyframes "collapse" {   
  629.  from {   
  630.    height: 387px;   
  631.  }   
  632.  to {   
  633.    height: 48px;   
  634.  }   
  635. }   
  636.   
  637. @-ms-keyframes "collapse" {   
  638.  from {   
  639.    height: 387px;   
  640.  }   
  641.  to {   
  642.    height: 48px;   
  643.  }   
  644. }   
  645.   
  646. @-o-keyframes "collapse" {   
  647.  from {   
  648.    height: 387px;   
  649.  }   
  650.  to {   
  651.    height: 48px;   
  652.  }   
  653. }   

纯CSS3实现的齿轮动画特效，希望大家喜欢。

基于HTML5的齿轮动画特效

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 HTML / CSS
HTML5中meta属性的使用方法
Feb 29 #HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 #HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 #HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 #HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 #HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 #HTML / CSS
推荐10个HTML5响应式框架
Feb 25 #HTML / CSS
批处理(1) NFS(1) 黑名单(1) SeaTunnel(1) T-SQL(1) Logrotate(1) timestamp(1) 重复数据(2) ftpserver(1) 排序失效(1)
You might like
php标签云的实现代码
2012/10/10 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
php上传文件问题汇总
2015/01/30 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
完美解决JS中汉字显示乱码问题（已解决）
2006/12/27 Javascript
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
微信用户访问小程序的登录过程详解
2019/09/20 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
python del()函数用法
2013/03/24 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
Python中最大递归深度值的探讨
2019/03/05 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
python ftplib模块使用代码实例
2019/12/31 Python
Django 返回json数据的实现示例
2020/03/05 Python
django中的数据库迁移的实现
2020/03/16 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
丝芙兰香港官网：Sephora香港
2018/03/13 全球购物
美国最大的无人机经销商：DroneNerds
2018/03/20 全球购物
经济学人订阅：The Economist
2018/07/19 全球购物
德国咖啡批发商：Coffeefair
2019/08/26 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店：Beach Cafe
2019/08/28 全球购物