• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    基于HTML5的齿轮动画特效

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

    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中meta属性的使用方法
    下一篇：Html5大文件断点续传实现方法
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    基于HTML5的齿轮动画特效 基于,HTML5,的,齿轮,动画,