扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >HTML5实现的齿轮动画特效代码
  • 370

0
分享到

HTML5实现的齿轮动画特效代码

2024-04-02 19:04:59 370人浏览 泡泡鱼
摘要

这篇文章主要介绍“HTML5实现的齿轮动画特效代码”，在日常操作中，相信很多人在html5实现的齿轮动画特效代码问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”HTML5实现的

这篇文章主要介绍“HTML5实现的齿轮动画特效代码”，在日常操作中，相信很多人在html5实现的齿轮动画特效代码问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”HTML5实现的齿轮动画特效代码”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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

  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.   

  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.   

  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.   

  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.   

  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.   

  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.   

  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.   

  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.   

  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.   

  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.   

  442.   

  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.   

  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.   

  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.   

  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. }   

到此，关于“HTML5实现的齿轮动画特效代码”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！

--结束END--

本文标题: HTML5实现的齿轮动画特效代码

本文链接: https://lsjlt.com/news/81392.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • HTML5实现的齿轮动画特效代码
    这篇文章主要介绍“HTML5实现的齿轮动画特效代码”，在日常操作中，相信很多人在HTML5实现的齿轮动画特效代码问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”HTML5实现的...
    99+
    2024-04-02
  • CSS3代码如何实现复选框动画特效
    本篇内容主要讲解“CSS3代码如何实现复选框动画特效”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS3代码如何实现复选框动画特效”吧!实例代码<!DOCTYPE html&g...
    99+
    2023-07-04
  • html5+css3进度条倒计时动画特效代码分享
    这篇文章主要介绍“html5+css3进度条倒计时动画特效代码分享”，在日常操作中，相信很多人在html5+css3进度条倒计时动画特效代码分享问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，...
    99+
    2024-04-02
  • HTML5中怎么用Canvas实现文字动画特效
    本篇内容介绍了“HTML5中怎么用Canvas实现文字动画特效”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成...
    99+
    2024-04-02
  • html5+css3进度条倒计时动画特效的代码怎么写
    这篇“html5+css3进度条倒计时动画特效的代码怎么写”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一...
    99+
    2024-04-02
  • Flutter实现心动的动画特效
    目录实现动画混入 SingleTickerProviderStateMixin创建动画抽离成小组件完整代码为了追求更好的用户体验，有时候我们需要一个类似心跳一样跳动着的控件来吸引用户...
    99+
    2024-04-02
  • Android GridView实现动画效果实现代码
     Android GridView实现动画效果 项目中用到的一些动画，GridView的Item依次从屏幕外飞入到相应位置，附上相关代码： MainActivity...
    99+
    2022-06-06
    gridview 动画 Android
  • Python+Pygame实现代码雨动画效果
    pygame实现代码雨动画 如视频所示 利用pygame库实现了一个代码呈雨状下落的视觉效果 部分代码如下 import sys import random import py...
    99+
    2024-04-02
  • 如何使用HTML5实现3D衣服摇摆动画特效
    今天就跟大家聊聊有关如何使用HTML5实现3D衣服摇摆动画特效，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。这又是一款基于HTML5 Canvas的...
    99+
    2024-04-02
  • iOS实现点赞动画特效
    本文实例为大家分享了iOS实现点赞动画特效的具体代码，供大家参考，具体内容如下 动画的基本使用 动画的实现基本上是基于对View控件和View的layer属性进行操作，对视图进行移动...
    99+
    2022-06-05
    iOS 点赞
  • WPF实现流光动画特效
    一、代码 <Window.Resources> <!--外--> <Storyboard x:Key="Storyboar...
    99+
    2024-04-02
  • HTML5中怎么实现动画效果
    这期内容当中小编将会给大家带来有关HTML5中怎么实现动画效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。1.canvas html代码： 代码如下:<html&...
    99+
    2024-04-02
  • CSS代码怎么实现loading动画效果
    本篇内容介绍了“CSS代码怎么实现loading动画效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！效果：代码使用了CSS的keyfram...
    99+
    2023-07-04
  • Python如何实现代码雨动画效果
    本篇内容介绍了“Python如何实现代码雨动画效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！代码如下import sysimp...
    99+
    2023-07-04
  • vue实现轮播图效果的代码
    这篇文章主要介绍“vue实现轮播图效果的代码”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue实现轮播图效果的代码”文章能帮助大家解决问题。1.原理：v-on:click="prev&q...
    99+
    2023-06-27
  • html5动画过渡效果怎么实现
    本篇内容介绍了“html5动画过渡效果怎么实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ 　　1、动...
    99+
    2024-04-02
  • 基于WPF实现3D画廊动画效果的示例代码
    接下来想做一个图廊，所以并没有必要用立方体，只需做一些“墙壁”就行了。 而在一个平面上建起另一个矩形的平面，实则非常容易，只需输入墙角的两点和高度就可以了，这...
    99+
    2023-02-28
    WPF实现3D画廊效果 WPF 3D画廊 WPF 3D
  • Android 四种动画效果的调用实现代码
    (1) main.xml 代码如下:(声明四个按钮控件) XML代码： 代码如下: <xml version="1.0" encoding="utf-8"> &l...
    99+
    2022-06-06
    调用 动画 Android
  • JavaScript实现扯网动画效果的示例代码
    目录演示技术栈源码css控制js部分演示 技术栈 JavaScript prototype（原型对象）： 所有的 JavaScript 对象都会从一个 prototype（原型对象...
    99+
    2024-04-02
  • Android xml实现animation的4种动画效果实例代码
    animation有四种动画类型：分别为alpha(透明的渐变)、rotate(旋转)、scale(尺寸伸缩)、translate(移动)，二实现的分发有两种，一种是javaC...
    99+
    2022-06-06
    XML animation 动画 Android
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作