水波波浪进度球

水波浪进度球

先看效果图：
水波波浪进度球
直接撸代码：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin:0;
    }
    .box{
      width: 200px;
      height: 200px;
      margin: 50px auto;
      background-image: linear-gradient(-180deg, rgba(255,255,255,0.00) 0%, rgba(255,234,149,0.96) 68%);
      border-radius: 100%;
      overflow: hidden;
      position: relative;
    }
    .box:before{
      content: '';
      width: 180px;
      height: 180px;
      background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,234,149,0.96) 68%);
      border-radius: 100%;
      position: absolute;
      left: 10px;
      top: 10px;
    }
    .box:after{
      content: '';
      width: 160px;
      height: 160px;
      background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,234,149,1) 50%);
      border-radius: 100%;
      position: absolute;
      left: 20px;
      top: 20px;
    }
    .wave{
      margin-top: 50px;
      width: 100%;
      height: 210px;
      position: relative;
      overflow: hidden;
      z-index: 2;
    }
    .parallax>use {
      animation: wave-move 1s linear infinite;
      animation-duration: .9s;
    }
    .parallax>use:nth-child(1) {
      animation-delay: -.1s;
    }
    .parallax>use:nth-child(2) {
      animation-delay: -.5s;
    }
    .parallax>use:nth-child(3) {
      animation-delay: -.8s;
    }
    @keyframes wave-move {
      0% {
        transform: translate(90px,0);
      }
      100% {
        transform: translate(-85px,0);
      }
    }
  </style>
</head>
<body>
  <div class="box">
    <svg class="wave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 200 210">
      <defs>
        <path id="wave-shape" stroke="rgba(255,255,255,.8)" stroke-width=".5" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 58-18 88-18 58 18 88 18 v185h-528z"></path>
      </defs>
      <g class="parallax">
        <use xlink:href="#wave-shape" x="50" y="0" fill="url(#linear)"></use>
        <use xlink:href="#wave-shape" x="50" y="3" fill="url(#linear)"></use>
        <use xlink:href="#wave-shape" x="50" y="6" fill="url(#linear)"></use>
      </g>
      <defs>
        <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(90)">
          <stop offset="10%"   stop-color="#FDD936" stop-opacity="0.4" />
          <stop offset="80%" stop-color="#E6911B" stop-opacity="0.8" />
        </linearGradient>
      </defs>
    </svg>
  </div>
</body>
</html>
水波浪进度球

相关推荐
