html5 svg+css3百分比波浪加载动画特效

一个很不错的圆形百分比加载小特效,用html5做的加载百分比动画。可以用到很多地方。

预览效果:

很不错的圆形百分比加载小特效

源代码:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>svg百分比加载</title>
  6. <style>
  7. *, *:before, *:after {
  8.   box-sizing: border-box;
  9.   outline: none;
  10. }
  11. body {
  12.   background: #020438;
  13.   font: 14px/1 'Open Sans', helvetica, sans-serif;
  14.   -webkit-font-smoothing: antialiased;
  15. }
  16. .box {
  17.   height: 280px;
  18.   width: 280px;
  19.   position: absolute;
  20.   top: 50%;
  21.   left: 50%;
  22.   -webkit-transform: translate(-50%, -50%);
  23.           transform: translate(-50%, -50%);
  24.   background: #020438;
  25.   border-radius: 100%;
  26.   overflow: hidden;
  27. }
  28. .box .percent {
  29.   position: absolute;
  30.   left: 0;
  31.   top: 0;
  32.   z-index: 3;
  33.   width: 100%;
  34.   height: 100%;
  35.   display: flex;
  36.   display: -webkit-flex;
  37.   align-items: center;
  38.   justify-content: center;
  39.   color: #fff;
  40.   font-size: 64px;
  41. }
  42. .box .water {
  43.   position: absolute;
  44.   left: 0;
  45.   top: 0;
  46.   z-index: 2;
  47.   width: 100%;
  48.   height: 100%;
  49.   -webkit-transform: translate(0, 100%);
  50.           transform: translate(0, 100%);
  51.   background: #4D6DE3;
  52.   transition: all .3s;
  53. }
  54. .box .water_wave {
  55.   width: 200%;
  56.   position: absolute;
  57.   bottom: 100%;
  58. }
  59. .box .water_wave_back {
  60.   right: 0;
  61.   fill: #C7EEFF;
  62.   -webkit-animation: wave-back 1.4s infinite linear;
  63.           animation: wave-back 1.4s infinite linear;
  64. }
  65. .box .water_wave_front {
  66.   left: 0;
  67.   fill: #4D6DE3;
  68.   margin-bottom: -1px;
  69.   -webkit-animation: wave-front .7s infinite linear;
  70.           animation: wave-front .7s infinite linear;
  71. }
  72. @-webkit-keyframes wave-front {
  73.   100% {
  74.     -webkit-transform: translate(-50%, 0);
  75.             transform: translate(-50%, 0);
  76.   }
  77. }
  78. @keyframes wave-front {
  79.   100% {
  80.     -webkit-transform: translate(-50%, 0);
  81.             transform: translate(-50%, 0);
  82.   }
  83. }
  84. @-webkit-keyframes wave-back {
  85.   100% {
  86.     -webkit-transform: translate(50%, 0);
  87.             transform: translate(50%, 0);
  88.   }
  89. }
  90. @keyframes wave-back {
  91.   100% {
  92.     -webkit-transform: translate(50%, 0);
  93.             transform: translate(50%, 0);
  94.   }
  95. }
  96. </style>
  97. </head>
  98. <body>
  99. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="display: none;">
  100.   <symbol id="wave">
  101.     <path d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z"></path>
  102.     <path d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z"></path>
  103.     <path d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z"></path>
  104.     <path d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z"></path>
  105.   </symbol>
  106. </svg>
  107. <div class="box">
  108.   <div class="percent">
  109.     <div class="percentNum" id="count">0</div>
  110.     <div class="percentB">%</div>
  111.   </div>
  112.   <div id="water" class="water">
  113.     <svg viewBox="0 0 560 20" class="water_wave water_wave_back">
  114.       <use xlink:href="#wave"></use>
  115.     </svg>
  116.     <svg viewBox="0 0 560 20" class="water_wave water_wave_front">
  117.       <use xlink:href="#wave"></use>
  118.     </svg>
  119.   </div>
  120. </div>
  121. <script>
  122. var cnt=document.getElementById("count");
  123. var water=document.getElementById("water");
  124. var percent=cnt.innerText;
  125. var interval;
  126. interval=setInterval(function(){
  127.   percent++;
  128.   cnt.innerHTML = percent;
  129.   water.style.transform='translate(0'+','+(100-percent)+'%)';
  130.   if(percent==100){
  131.     clearInterval(interval);
  132.   }
  133. },60);
  134. </script>
  135. </body>
  136. </html>

 

波波

发表评论

您必须 登录 才能发表留言!