主頁 > 知識庫 > 基于HTML5的齒輪動畫特效

基于HTML5的齒輪動畫特效
熱門標(biāo)簽：申請400電話流程簡介 地圖標(biāo)注位置能賺錢嗎 南通數(shù)據(jù)外呼系統(tǒng)推廣 呼和浩特外呼電銷系統(tǒng)排名 阜陽企業(yè)外呼系統(tǒng) 外呼系統(tǒng)電話怎么投訴 pageadm實現(xiàn)地圖標(biāo)注 邢臺縣地圖標(biāo)注app 外呼線穩(wěn)定線路

這是一個基于HTML5的齒輪動畫特效，我們將齒輪轉(zhuǎn)動的物理學(xué)原理，轉(zhuǎn)換為HTML5代碼，在網(wǎng)頁上實現(xiàn)了模擬齒輪轉(zhuǎn)動的動畫效果。該齒輪動畫的最大特點是它由好多個齒輪組成，這對齒輪傳動的算法要求就大大提高了，而且我們并沒有用JavaScript，而是純CSS3實現(xiàn)的。

HTML代碼

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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復(fù)制內(nèi)容到剪貼板
  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實現(xiàn)的齒輪動畫特效，希望大家喜歡。

標(biāo)簽：鶴崗 辛集 撫順 楊凌 黃山 內(nèi)蒙古 德州 蚌埠

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《基于HTML5的齒輪動畫特效》，本文關(guān)鍵詞  基于,HTML5,的,齒輪,動畫,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《基于HTML5的齒輪動畫特效》相關(guān)的同類信息！
  • 本頁收集關(guān)于基于HTML5的齒輪動畫特效的相關(guān)信息資訊供網(wǎng)民參考！
    • 推薦文章