css实现波浪纹，水波纹动画

CaiKanXP 2020-06-09

1.示意图

css实现波浪纹，水波纹动画

2.结构

css实现波浪纹，水波纹动画 

3.wave.html代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSS实战 - 波浪</title>

  <style type="text/css">
    .wave-box{
      border: 1px solid rgba(0,209,255,0.2);
      height: 78.5px;
      width: 78.5px;
      border-radius: 50%;
      overflow: hidden;
      margin: auto;
      position: relative;
      background: #eee;
    }
    .wave-box .text{
      font-size: 24px;
      color: #FFFFFF;
      letter-spacing: 0;
      position: absolute;
      z-index: 85;
      display: block;
      width: 78px;
      text-align: center;
      top: 20px;
    }
    .water {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 20px;
      background: url(‘wave_blue.svg‘) repeat-x;
      background-position: 0 20px;
      -webkit-animation: move_wave 14s linear infinite;
      animation: move_wave 14s linear infinite;
    }
    .w1 {
      opacity: .5;
      background-position: 120px 0;
      -webkit-animation: move_wave 19s linear infinite;
      animation: move_wave 19s linear infinite;
    }
    .w2 {
      opacity: .3;
      background-position: 60px 0;
      -webkit-animation: move_wave 23s linear infinite;
      animation: move_wave 23s linear infinite;
    }
    @-webkit-keyframes move_wave {
      0% { background-position: 0 0 }
      to { background-position: 232px 0 }
    }
    @keyframes move_wave {
      0% { background-position: 0 0 }
      to { background-position: 232px 0 }
    }
  </style>
</head>

<body>
  <div class="wave-box">
    <span class="text">35个</span>
    <div class="water w1"></div>
    <div class="water w2"></div>
    <div class="water"></div>
  </div>
</body>

</html>

3.wave_blue.svg图片

<?xml version="1.0" encoding="UTF-8"?>
<svg width="240px" height="75px" viewBox="0 0 240 75" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 58 (84663) - https://sketch.com -->
    <title>蓝博文</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <linearGradient x1="52.1506169%" y1="100%" x2="52.1506169%" y2="9.07623828%" id="linearGradient-1">
            <stop stop-color="#1F78B6" offset="0%"></stop>
            <stop stop-color="#1EC2E2" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M0,15.5981057 C17.1009532,15.5981057 19.5223044,0.0156938776 36.2301997,0.0156938776 C52.938095,0.0156938776 54.8055321,13.5714733 66.4395144,13.5714733 C78.0734967,13.5714733 84.9898302,-0.534635292 104.120465,0.0156938776 C122.821214,0.553656572 132.620158,15.5981057 152.543102,15.5981057 C163.366959,15.5981057 177.807487,0.0156938776 195.442818,0.0156938776 C213.078149,0.0156938776 225.496365,15.5981057 240,15.5981057 C240,15.5981057 240,35.3987371 240,75 L0,75 C0,35.3987371 0,15.5981057 0,15.5981057 Z" id="蓝" fill="url(#linearGradient-1)"></path>
    </g>
</svg>

CaiKanXP

CaiKanXP