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

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

预览效果：

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

源代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>svg百分比加载</title>
  7. <style>
  8. *, *:before, *:after {
  9.   box-sizing: border-box;
  10.   outline: none;
  11. }
  13. body {
  14.   background: #020438;
  15.   font: 14px/1 'Open Sans', helvetica, sans-serif;
  16.   -webkit-font-smoothing: antialiased;
  17. }
  19. .box {
  20.   height: 280px;
  21.   width: 280px;
  22.   position: absolute;
  23.   top: 50%;
  24.   left: 50%;
  25.   -webkit-transform: translate(-50%, -50%);
  26.           transform: translate(-50%, -50%);
  27.   background: #020438;
  28.   border-radius: 100%;
  29.   overflow: hidden;
  30. }
  31. .box .percent {
  32.   position: absolute;
  33.   left: 0;
  34.   top: 0;
  35.   z-index: 3;
  36.   width: 100%;
  37.   height: 100%;
  38.   display: flex;
  39.   display: -webkit-flex;
  40.   align-items: center;
  41.   justify-content: center;
  42.   color: #fff;
  43.   font-size: 64px;
  44. }
  45. .box .water {
  46.   position: absolute;
  47.   left: 0;
  48.   top: 0;
  49.   z-index: 2;
  50.   width: 100%;
  51.   height: 100%;
  52.   -webkit-transform: translate(0, 100%);
  53.           transform: translate(0, 100%);
  54.   background: #4D6DE3;
  55.   transition: all .3s;
  56. }
  57. .box .water_wave {
  58.   width: 200%;
  59.   position: absolute;
  60.   bottom: 100%;
  61. }
  62. .box .water_wave_back {
  63.   right: 0;
  64.   fill: #C7EEFF;
  65.   -webkit-animation: wave-back 1.4s infinite linear;
  66.           animation: wave-back 1.4s infinite linear;
  67. }
  68. .box .water_wave_front {
  69.   left: 0;
  70.   fill: #4D6DE3;
  71.   margin-bottom: -1px;
  72.   -webkit-animation: wave-front .7s infinite linear;
  73.           animation: wave-front .7s infinite linear;
  74. }
  76. @-webkit-keyframes wave-front {
  77.   100% {
  78.     -webkit-transform: translate(-50%, 0);
  79.             transform: translate(-50%, 0);
  80.   }
  81. }
  83. @keyframes wave-front {
  84.   100% {
  85.     -webkit-transform: translate(-50%, 0);
  86.             transform: translate(-50%, 0);
  87.   }
  88. }
  89. @-webkit-keyframes wave-back {
  90.   100% {
  91.     -webkit-transform: translate(50%, 0);
  92.             transform: translate(50%, 0);
  93.   }
  94. }
  95. @keyframes wave-back {
  96.   100% {
  97.     -webkit-transform: translate(50%, 0);
  98.             transform: translate(50%, 0);
  99.   }
  100. }
  101. </style>
  102. </head>
  103. <body>
  106. <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;">
  107.   <symbol id="wave">
  108.     <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>
  109.     <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>
  110.     <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>
  111.     <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>
  112.   </symbol>
  113. </svg>
  114. <div class="box">
  115.   <div class="percent">
  116.     <div class="percentNum" id="count">0</div>
  117.     <div class="percentB">%</div>
  118.   </div>
  119.   <div id="water" class="water">
  120.     <svg viewBox="0 0 560 20" class="water_wave water_wave_back">
  121.       <use xlink:href="#wave"></use>
  122.     </svg>
  123.     <svg viewBox="0 0 560 20" class="water_wave water_wave_front">
  124.       <use xlink:href="#wave"></use>
  125.     </svg>
  126.   </div>
  127. </div>
  129. <script>
  130. var cnt=document.getElementById("count");
  131. var water=document.getElementById("water");
  132. var percent=cnt.innerText;
  133. var interval;
  134. interval=setInterval(function(){
  135.   percent++;
  136.   cnt.innerHTML = percent;
  137.   water.style.transform='translate(0'+','+(100-percent)+'%)';
  138.   if(percent==100){
  139.     clearInterval(interval);
  140.   }
  141. },60);
  142. </script>
  144. </body>
  145. </html>

 

你想把广告放到这里吗？

发表评论

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