经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS3 » 查看文章
css3实现的天气图标动画效果_css3_CSS
来源：jb51　　时间：2021/4/12 9:35:28　　对本文有异议

实现效果

实现代码

html

  1. <div class="wrapper">
  2.   <div class="sun"></div>
  3.   <div class="cloud">
  4.     <div class="cloud1">
  5.       <ul>
  6.         <li></li>
  7.         <li></li>
  8.         <li></li>
  9.         <li></li>
  10.       </ul>
  11.     </div>
  12.     <div class="cloud1 c_shadow">
  13.       <ul>
  14.         <li></li>
  15.         <li></li>
  16.         <li></li>
  17.         <li></li>
  18.       </ul>
  19.     </div>
  20.   </div>
  21.   
  22.   <div class="cloud_s">
  23.     <div class="cloud1">
  24.       <ul>
  25.         <li></li>
  26.         <li></li>
  27.         <li></li>
  28.         <li></li>
  29.       </ul>
  30.     </div>
  31.     <div class="cloud1 c_shadow">
  32.       <ul>
  33.         <li></li>
  34.         <li></li>
  35.         <li></li>
  36.         <li></li>
  37.       </ul>
  38.     </div>
  39.   </div>
  40.   
  41.   <div class="cloud_vs">
  42.     <div class="cloud1">
  43.       <ul>
  44.         <li></li>
  45.         <li></li>
  46.         <li></li>
  47.         <li></li>
  48.       </ul>
  49.     </div>
  50.     <div class="cloud1 c_shadow">
  51.       <ul>
  52.         <li></li>
  53.         <li></li>
  54.         <li></li>
  55.         <li></li>
  56.       </ul>
  57.     </div>
  58.   </div>
  59.   <div class="haze"></div>
  60.   <div class="haze_stripe"></div>
  61.   <div class="haze_stripe"></div>
  62.   <div class="haze_stripe"></div>
  63.   <div class="thunder"></div>
  64.   <div class="rain">
  65.      <ul>
  66.        <li></li>
  67.        <li></li>
  68.        <li></li>
  69.     </ul>
  70.   </div>
  71.   <div class="sleet">
  72.      <ul>
  73.        <li></li>
  74.        <li></li>
  75.        <li></li>
  76.     </ul>
  77.   </div>
  78.   <div class="text">
  79.     <ul>
  80.       <li>Mostly Sunny</li>
  81.       <li>Partly Sunny</li>
  82.       <li>Partly Cloudy</li>
  83.       <li>Mostly Cloudy</li>
  84.       <li>Cloudy</li>
  85.       <li>Hazy</li>
  86.       <li>Thunderstorm</li>
  87.       <li>Rain</li>
  88.       <li>Sleet</li>
  89.     </ul>
  90.   </div>
  91. </div>

css3

  1. @import url(https://fonts.googleapis.com/css?family=Raleway+Dots);
  2.  
  3. body{
  4.   margin: 0;
  5.   padding: 0;
  6.   background: #33495f;
  7. }
  8.  
  9. .wrapper{
  10.   width: 150px;
  11.   height: 150px;
  12.   position: absolute;
  13.   top: calc(50% - 75px);
  14.   left: calc(50% - 75px);
  15. }
  16.  
  17. .sun{
  18.   position: absolute;
  19.   bottom: 0px;
  20.   right: 0px;
  21.   width: 85px;
  22.   height: 85px;
  23.   background: #f9db62;
  24.   border-radius: 360px;
  25.   opacity: 1;
  26.   animation: sun 10s 0s linear infinite;
  27. }
  28.  
  29. .cloud{
  30.   position: absolute;
  31.   bottom: 12px;
  32.   left: 8px;
  33.   z-index: 2;
  34.   opacity: 0;
  35.   animation: cloud 10s 0s linear infinite;
  36. }
  37.  
  38. .cloud .cloud1:not(.c_shadow) ul li{
  39.   animation: cloudi 10s 0.1s linear infinite;
  40. }
  41.  
  42. .cloud .cloud1:not(.c_shadow):before{
  43.   animation: cloudi 10s 0s linear infinite;
  44. }
  45.  
  46. .cloud_s{
  47.   position: absolute;
  48.   bottom: 70px;
  49.   left: 150px;
  50.   transform: scale(0.7,0.7) matrix(-1, 0, 0, 1, 0, 0);
  51.   z-index: 1;
  52.   opacity: 0;
  53.   animation: cloud_s 10s 0s linear infinite;
  54. }
  55.  
  56. .cloud_s .c_shadow{
  57.   transform: scale(1.02,1.02);
  58. }
  59.  
  60. .cloud_vs{
  61.   position: absolute;
  62.   bottom: 90px;
  63.   left: 30px;
  64.   transform: scale(0.5,0.5);
  65.   z-index: 0;
  66.   opacity: 0;
  67.   animation: cloud_vs 10s 0s linear infinite;
  68. }
  69.  
  70. .c_shadow{
  71.   z-index: 4 !important;
  72.   left: -5px;
  73.   bottom: -3px !important;
  74. }
  75.  
  76. .c_shadow:before{
  77.   background: #33495f !important;
  78. }
  79.  
  80. .c_shadow ul li{
  81.   width: 60px !important;
  82.   height: 60px !important;
  83.   background: #33495f !important;
  84.   float: left;
  85.   position: absolute;
  86.   bottom: -2px !important;
  87.   border-radius: 360px;
  88. }
  89.  
  90. .c_shadow ul li:nth-child(2){
  91.   width: 80px !important;
  92.   height: 80px !important;
  93.   background: #33495f !important;
  94.   float: left;
  95.   border-radius: 360px;
  96.   position: absolute;
  97.   bottom: 16px !important;
  98.   left: 25px !important;
  99. }
  100.  
  101. .c_shadow ul li:nth-child(3){
  102.   width: 70px !important;
  103.   height: 70px !important;
  104.   background: #33495f !important;
  105.   float: left;
  106.   border-radius: 360px;
  107.   position: absolute;
  108.   bottom: 6px !important;
  109.   left: 60px !important;
  110. }
  111.  
  112. .c_shadow ul li:last-child{
  113.   width: 60px !important;
  114.   height: 60px !important;
  115.   background: #33495f !important;
  116.   float: left;
  117.   border-radius: 360px;
  118.   position: absolute;
  119.   bottom: 0px;
  120.   left: 90px;
  121. }
  122.  
  123.  
  124. .cloud1{
  125.   position: absolute;
  126.   bottom: 0px;
  127.   z-index: 5;
  128. }
  129.  
  130. .cloud1:before{
  131.   content: '';
  132.   position: absolute;
  133.   bottom: 0px;
  134.   left: 28px;
  135.   width: 90px;
  136.   height: 20px;
  137.   background: #fff;
  138. }
  139.  
  140. .cloud1 ul{
  141.   list-style: none;
  142.   margin: 0;
  143.   padding: 0;
  144. }
  145.  
  146. .cloud1 ul li{
  147.   width: 50px;
  148.   height: 50px;
  149.   background: #fff;
  150.   float: left;
  151.   border-radius: 360px;
  152. }
  153.  
  154. .cloud1 ul li:nth-child(2){
  155.   width: 70px;
  156.   height: 70px;
  157.   background: #fff;
  158.   float: left;
  159.   border-radius: 360px;
  160.   position: absolute;
  161.   bottom: 18px;
  162.   left: 25px;
  163. }
  164.  
  165. .cloud1 ul li:nth-child(3){
  166.   width: 60px;
  167.   height: 60px;
  168.   background: #fff;
  169.   float: left;
  170.   border-radius: 360px;
  171.   position: absolute;
  172.   bottom: 8px;
  173.   left: 60px;
  174. }
  175.  
  176. .cloud1 ul li:last-child{
  177.   width: 50px;
  178.   height: 50px;
  179.   background: #fff;
  180.   float: left;
  181.   border-radius: 360px;
  182.   position: absolute;
  183.   bottom: 0px;
  184.   left: 90px;
  185. }
  186.  
  187. .haze{
  188.   background: #33495f;
  189.   position: absolute;
  190.   bottom: 50px;
  191.   left: 0px;
  192.   width: 200px;
  193.   height: 45px;
  194.   z-index: 6;
  195.   opacity: 0;
  196.   animation: haze 10s 0s linear infinite;
  197. }
  198.  
  199. .haze_stripe{
  200.   background: #a3b5c7;
  201.   position: absolute;
  202.   bottom: 75px;
  203.   left: 20px;
  204.   width: 115px;
  205.   height: 10px;
  206.   z-index: 17;
  207.   opacity: 0;
  208.   border-radius: 360px;
  209.   animation: haze_stripe 10s 0.1s linear infinite;
  210. }
  211.  
  212. .haze_stripe:nth-child(6){
  213.   bottom: 55px;
  214.   animation: haze_stripe 10s 0.2s linear infinite;
  215. }
  216. .haze_stripe:last-child{
  217.   bottom: 35px;
  218.   animation: haze_stripe 10s 0.4s linear infinite;
  219. }
  220.  
  221. .thunder{
  222.   position: absolute;
  223.   bottom: 100px;
  224.   left: 65px;
  225.   width: 12px;
  226.   height: 12px;
  227.   background: #f9db62;
  228.   transform: skew(-25deg);
  229.   opacity: 0;
  230.   animation: thunder 10s 0s linear infinite;
  231. }
  232.  
  233. .thunder:before{
  234.   content: '';
  235.   position: absolute;
  236.   top: 11px;
  237.   left: 0px;
  238.   width: 25px;
  239.   height: 8px;
  240.   background: #f9db62;
  241. }
  242.  
  243. .thunder:after{
  244.   content: '';
  245.   position: absolute;
  246.   width: 0; 
  247.   height: 0;
  248.   top: 18px;
  249.   right: -14px;
  250.   border-left: 5px solid transparent;
  251.   border-right: 5px solid transparent;
  252.   
  253.   border-top: 20px solid #f9db62;
  254.   transform: skew(5deg);
  255. }
  256.  
  257. .rain{
  258.   position: absolute;
  259.   bottom: 0px;
  260.   left: 25px;
  261. }
  262.  
  263. .rain ul{
  264.   list-style: none;
  265.   margin: 0;
  266.   padding: 0px;
  267. }
  268.  
  269. .rain ul li{
  270.   float: left;
  271.   position: absolute;
  272.   bottom: 50px;
  273.   left: 50px;
  274.   margin-left: 20px;
  275.   background: #6ab9e9;
  276.   height: 40px;
  277.   width: 10px;
  278.   border-radius: 360px;
  279.   transform: rotate(35deg);
  280.   opacity: 0;
  281. }
  282.  
  283. .rain ul li:first-child{
  284.   animation: raini 10s 0s linear infinite;
  285. }
  286.  
  287. .rain ul li:nth-child(2){
  288.   animation: rainii 10s 0.2s linear infinite;
  289. }
  290.  
  291. .rain ul li:last-child{
  292.   animation: rainiii 10s 0.4s linear infinite;
  293. }
  294.  
  295. .sleet{
  296.   position: absolute;
  297.   bottom: 0px;
  298.   left: 25px;
  299. }
  300.  
  301. .sleet ul{
  302.   list-style: none;
  303.   margin: 0;
  304.   padding: 0px;
  305. }
  306.  
  307. .sleet ul li{
  308.   float: left;
  309.   position: absolute;
  310.   bottom: 50px;
  311.   left: 50px;
  312.   margin-left: 20px;
  313.   background: #fff;
  314.   height: 40px;
  315.   width: 10px;
  316.   border-radius: 360px;
  317.   transform: rotate(35deg);
  318.   opacity: 0;
  319. }
  320.  
  321. .sleet ul li:first-child{
  322.   animation: raini 10s 1.0s linear infinite;
  323. }
  324.  
  325. .sleet ul li:nth-child(2){
  326.   animation: rainii 10s 1.4s linear infinite;
  327. }
  328.  
  329. .sleet ul li:last-child{
  330.   animation: rainiii 10s 1.6s linear infinite;
  331. }
  332.  
  333. .text{
  334.   position: absolute;
  335.   bottom: 0px;
  336. }
  337.  
  338. .text ul{
  339.   list-style: none;
  340.   margin: 0;
  341.   padding: 0;
  342. }
  343.  
  344. .text ul li{
  345.   position: absolute;
  346.   bottom: -50px;
  347.   width: 150px;
  348.   color: #fff;
  349.   font-family: 'Raleway Dots', cursive;
  350.   font-weight: 100;
  351.   font-size: 20px;
  352.   text-align: center;
  353.   opacity: 0;
  354. }
  355.  
  356. .text ul li:first-child{
  357.   animation: fade_in 10.0s 0s linear infinite;
  358. }
  359.  
  360. .text ul li:nth-child(2){
  361.   animation: fade_in 10.0s 1.6s linear infinite;
  362. }
  363.  
  364. .text ul li:nth-child(3){
  365.   animation: fade_in 10.0s 2.4s linear infinite;
  366. }
  367.  
  368. .text ul li:nth-child(4){
  369.   animation: fade_in 10.0s 3.4s linear infinite;
  370. }
  371.  
  372. .text ul li:nth-child(5){
  373.   animation: fade_in 10.0s 4.0s linear infinite;
  374. }
  375.  
  376. .text ul li:nth-child(6){
  377.   animation: fade_in 10.0s 5.4s linear infinite;
  378. }
  379.  
  380. .text ul li:nth-child(7){
  381.   animation: fade_in 10.0s 6.4s linear infinite;
  382. }
  383.  
  384. .text ul li:nth-child(8){
  385.   animation: fade_in 10.0s 7.2s linear infinite;
  386. }
  387.  
  388. .text ul li:nth-child(9){
  389.   animation: fade_in 10.0s 8.2s linear infinite;
  390. }
  391.  
  392. @keyframes sun{
  393.   0%{
  394.     opacity: 1;
  395.     bottom: 35px;
  396.     right: 35px;
  397.   }
  398.   4%{
  399.     bottom: 80px;
  400.     right: 80px;
  401.   }
  402.   4.5%{
  403.     bottom: 75px;
  404.     right: 75px;
  405.     opacity: 1;
  406.   }
  407.   40%{
  408.     opacity: 1;
  409.   }
  410.   41%{
  411.     bottom: 75px;
  412.     right: 75px;
  413.     opacity: 0;
  414.   }
  415.   100%{
  416.     opacity: 0;
  417.     bottom: 0px;
  418.     right: 0px;
  419.   }
  420. }
  421.  
  422. @keyframes cloud{
  423.   0%{
  424.     transform: scale(0.8);
  425.     left: 120px;
  426.     bottom: 35px;
  427.     opacity: 0;
  428.   }
  429.   2%{
  430.     opacity: 1;
  431.   }
  432.   3.5%{
  433.     bottom: 35px;
  434.     left: 10px;
  435.     opacity: 1;
  436.   }
  437.   16%{
  438.     transform: scale(0.8);
  439.   }
  440.   18%{
  441.     transform: scale(0.95);
  442.   }
  443.   19%{
  444.     transform: scale(0.9);
  445.   }
  446.   48%{
  447.     opacity: 1;
  448.     bottom: 35px;
  449.   }
  450.   50%{
  451.     bottom: 70px;
  452.   }
  453.   64%{
  454.     
  455.   }
  456.   96%{
  457.     opacity: 1;
  458.   }
  459.   100%{
  460.     opacity: 0;
  461.     bottom: 70px;
  462.     left: 10px;
  463.   }
  464. }
  465.  
  466. @keyframes cloud_s{
  467.   0%{
  468.     transform: scale(0.6);
  469.     opacity: 0;
  470.     bottom: 40px;
  471.     left: 18px;
  472.   }
  473.   23%{
  474.     opacity: 0;
  475.   }
  476.   24%{
  477.     opacity: 1;
  478.     bottom: 40px;
  479.     left: 30px;
  480.   }
  481.   28%{
  482.     opacity: 1;
  483.     bottom: 85px;
  484.     left: 60px;
  485.   }
  486.   32%{
  487.     transform: scale(0.6);
  488.   }
  489.   34%{
  490.     transform: scale(0.75);
  491.   }
  492.   35%{
  493.     transform: scale(0.7);
  494.   }
  495.   48%{
  496.     opacity: 1;
  497.   }
  498.   49%{
  499.     opacity: 0;
  500.   }
  501.   100%{
  502.     transform: scale(0.7);
  503.     opacity: 0;
  504.     bottom: 85px;
  505.     left: 60px;
  506.   }
  507. }
  508.  
  509. @keyframes cloud_vs{
  510.   0%{
  511.     opacity: 0;
  512.     bottom: 85px;
  513.     left: 60px;
  514.   }
  515.   39%{
  516.     opacity: 0;
  517.   }
  518.   40%{
  519.     opacity: 1; 
  520.     bottom: 85px;
  521.     left: 60px;
  522.   }
  523.   42%{
  524.     bottom: 125px;
  525.     left: 10px;
  526.   }
  527.   43%{
  528.     bottom: 120px;
  529.     left: 15px;
  530.   }
  531.   48%{
  532.     opacity: 1;
  533.   }
  534.   49%{
  535.     opacity: 0;
  536.   }
  537.   100%{
  538.     opacity: 0;
  539.     bottom: 120px;
  540.     left: 15px;
  541.   }
  542. }
  543.  
  544. @keyframes haze{
  545.   0%{
  546.     opacity: 0;
  547.   }
  548.   48%{
  549.     height: 0px;
  550.     opacity: 0;
  551.   }
  552.   49%{
  553.     height: 45px;
  554.     opacity: 1;
  555.   }
  556.   57%{
  557.     opacity:1;
  558.     height: 45px;
  559.   }
  560.   58%{
  561.     opacity: 0;
  562.     height: 0px;
  563.   }
  564. }
  565.  
  566. @keyframes haze_stripe{
  567.   0%{
  568.     opacity: 0;
  569.   }
  570.   48%{
  571.     opacity: 0;
  572.   }
  573.   49%{
  574.     opacity: 1;
  575.   }
  576.   56%{
  577.     opacity:1;
  578.   }
  579.   57%{
  580.     opacity: 0;
  581.   }
  582. }
  583.  
  584. @keyframes cloudi{
  585.   0%{
  586.     background: #fff;
  587.   }
  588.   56%{
  589.     background: #fff;
  590.   }
  591.   57%{
  592.     background: #92a4b6;
  593.   }
  594.   100%{
  595.     background: #92a4b6;
  596.   }
  597. }
  598.  
  599. @keyframes thunder{
  600.   0%{
  601.     opacity: 0;
  602.     bottom: 100px;
  603.     left: 65px;
  604.   }
  605.   62%{
  606.     opacity: 0;
  607.     bottom: 100px;
  608.     left: 65px;
  609.   }
  610.   64%{
  611.     opacity: 1;
  612.     bottom: 50px;
  613.     left: 60px;
  614.   }
  615.   65%{
  616.     opacity: 1;
  617.     bottom: 55px;
  618.     left: 61px;
  619.   }
  620.   72%{
  621.     opacity: 1;
  622.     bottom: 55px;
  623.     left: 61px;
  624.   }
  625.   73%{
  626.     opacity: 0;
  627.   }
  628.   100%{
  629.     opacity: 0;
  630.     bottom: 55px;
  631.   }
  632. }
  633.  
  634. @keyframes raini{
  635.   0%{
  636.     opacity: 0;
  637.     bottom: 100px;
  638.     left: 60px;
  639.   }
  640.   72%{
  641.     opacity: 0;
  642.     bottom: 100px;
  643.     left: 60px;
  644.   }
  645.   73%{
  646.     opacity: 1;
  647.     bottom: 15px;
  648.     left: 50px;
  649.   }
  650.   74%{
  651.     opacity: 1;
  652.     bottom: 25px;
  653.     left: 52px;
  654.   }
  655.   80%{
  656.     opacity: 1;
  657.     bottom: 25px;
  658.     left: 52px;
  659.   }
  660.   81%{
  661.     opacity: 0;
  662.     bottom: -15px;
  663.     left: 6px;
  664.   }
  665.   100%{
  666.     opacity: 0;
  667.     bottom: 20px;
  668.   }
  669. }
  670.  
  671. @keyframes rainii{
  672.   0%{
  673.     opacity: 0;
  674.     bottom: 100px;
  675.     left: 30px;
  676.   }
  677.   72%{
  678.     opacity: 0;
  679.     bottom: 100px;
  680.     left: 30px;
  681.   }
  682.   73%{
  683.     opacity: 1;
  684.     bottom: 15px;
  685.     left: 20px;
  686.   }
  687.   74%{
  688.     opacity: 1;
  689.     bottom: 25px;
  690.     left: 22px;
  691.   }
  692.   80%{
  693.     opacity: 1;
  694.     bottom: 25px;
  695.     left: 22px;
  696.   }
  697.   81%{
  698.     opacity: 0;
  699.     bottom: -15px;
  700.     left: -6px;
  701.   }
  702.   100%{
  703.     opacity: 0;
  704.     bottom: 20px;
  705.   }
  706. }
  707.  
  708. @keyframes rainiii{
  709.   0%{
  710.     opacity: 0;
  711.     bottom: 100px;
  712.     left: 0px;
  713.   }
  714.   72%{
  715.     opacity: 0;
  716.     bottom: 100px;
  717.     left: 0px;
  718.   }
  719.   73%{
  720.     opacity: 1;
  721.     bottom: 15px;
  722.     left: -10px;
  723.   }
  724.   74%{
  725.     opacity: 1;
  726.     bottom: 25px;
  727.     left: -8px;
  728.   }
  729.   80%{
  730.     opacity: 1;
  731.     bottom: 25px;
  732.     left: -8px;
  733.   }
  734.   81%{
  735.     opacity: 0;
  736.     bottom: -15px;
  737.     left: -28px;
  738.   }
  739.   100%{
  740.     opacity: 0;
  741.     bottom: 20px;
  742.   }
  743. }
  744.  
  745. @keyframes fade_in{
  746.   0%{
  747.     opacity: 0;
  748.   }
  749.   8%{
  750.     opacity: 1;
  751.   }
  752.   9%{
  753.     opacity: 1;
  754.   }
  755.   11%{
  756.     opacity: 1;
  757.   }
  758.   12%{
  759.     opacity: 0;
  760.   }
  761.   100%{
  762.     oapcity: 0;
  763.   }
  764. }

以上就是css3实现的天气图标动画效果的详细内容，更多关于css3 天气图标动画的资料请关注w3xue其它相关文章！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS3热门文章

  • CSS3选择器新增问题的实现_css3_CSS
  • CSS3实现列表无限滚动/轮播效果_css3_CSS
  • CSS3 Tab动画实例之背景切换动态效果_css3_CSS
  • Github上流行的CSS3动画效果库 animate.css
  • CSS3通过var()和calc()函数实现动画特效_css3_CSS
  • CSS3动画之DIY Loading动画
  • CSS中这个函数你会用吗？垂直居中都可以设置
  • 巧用 CSS3的webkit-box-reflect 倒影实现各类动效_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3过渡旋转透视2d3d动画等效果的实例代码_css3_CSS

    • CSS3推荐文章

  • 【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究
  • 可视化学习：如何生成简单动画让图形动起来
  • 【布局进阶】巧用 :has & drop-shadow 实现复杂布局效果
  • 【动画进阶】神奇的背景，生化危机4日食 Loading 动画还原
  • 【动画进阶】神奇的 3D 磨砂玻璃透视效果
  • 快速构建页面结构的 3D Visualization
  • 详解CSS3.0(Cascading Style Sheet) 层叠级联样式表_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3实现的侧滑菜单_css3_CSS
  • CSS3常见动画的实现方式_css3_CSS

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号