CSS特效---百分比加载特效

1、演示

2、一切尽在代码中

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      *,
      *:before,
      *:after {
        box-sizing: border-box;
        outline: none;
      }

      body {
        background: #57c3ea;
        font: 14px/1 'Open Sans', helvetica, sans-serif;
        -webkit-font-smoothing: antialiased;
      }

      .box {
        height: 280px;
        width: 280px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background: #a0a0a0;
        border-radius: 100%;
        overflow: hidden;
      }
      .box .percent {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
        width: 100%;
        height: 100%;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 64px;
      }
      .box .water {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        -webkit-transform: translate(0, 100%);
        transform: translate(0, 100%);
        background: #266fff;
        transition: all 0.3s;
      }
      .box .water_wave {
        width: 200%;
        position: absolute;
        bottom: 100%;
      }
      .box .water_wave_back {
        right: 0;
        fill: #c7eeff;
        -webkit-animation: wave-back 1.4s infinite linear;
        animation: wave-back 1.4s infinite linear;
      }
      .box .water_wave_front {
        left: 0;
        fill: #266fff;
        margin-bottom: -1px;
        -webkit-animation: wave-front 0.7s infinite linear;
        animation: wave-front 0.7s infinite linear;
      }

      @-webkit-keyframes wave-front {
        100% {
          -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
        }
      }

      @keyframes wave-front {
        100% {
          -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
        }
      }
      @-webkit-keyframes wave-back {
        100% {
          -webkit-transform: translate(50%, 0);
          transform: translate(50%, 0);
        }
      }
      @keyframes wave-back {
        100% {
          -webkit-transform: translate(50%, 0);
          transform: translate(50%, 0);
        }
      }
    </style>
  </head>
  <body>
    <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">
      <symbol id="wave">
        <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>
        <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>
        <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>
        <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>
      </symbol>
    </svg>
    <div class="box">
      <div class="percent">
        <div class="percentNum" id="count">0</div>
        <div class="percentB">%</div>
      </div>
      <div id="water" class="water">
        <svg viewBox="0 0 560 20" class="water_wave water_wave_back">
          <use xlink:href="#wave"></use>
        </svg>
        <svg viewBox="0 0 560 20" class="water_wave water_wave_front">
          <use xlink:href="#wave"></use>
        </svg>
      </div>
    </div>
    <script>
      var cnt = document.getElementById('count')
      var water = document.getElementById('water')
      var percent = cnt.innerText
      var interval
      interval = setInterval(function () {
        percent++
        cnt.innerHTML = percent
        water.style.transform = 'translate(0' + ',' + (100 - percent) + '%)'
        if (percent == 100) {
          clearInterval(interval)
        }
      }, 60)
    </script>
  </body>
</html>
相关推荐
前端小趴菜059 分钟前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~1 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.2 小时前
serviceWorker缓存资源
前端
RadiumAg3 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo3 小时前
ES6笔记2
开发语言·前端·javascript
yanlele3 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子4 小时前
React状态管理最佳实践
前端
烛阴4 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子5 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...5 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts