css实现圆形水纹波动效果

Posted 晚星@

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css实现圆形水纹波动效果相关的知识,希望对你有一定的参考价值。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>CSS3实现水波浪浮动特效- 素材abc</title>

  <style>
    @keyframes move_wave {
      0% {
        transform: translateX(0) translateZ(0) scaleY(1)
      }

      50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
      }

      100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
      }
    }

    .waveWrapper {
      overflow: hidden;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      width: 500px;
      height: 500px;
      border-radius: 500px;
      margin: auto;
      border: 10px double black;
    }

    .waveWrapperInner {
      position: absolute;
      width: 100%;
      overflow: hidden;
      height: 100%;
      bottom: 120px;
      background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);
    }

    .bgTop {
      z-index: 15;
      opacity: 0.5;
    }

    .bgMiddle {
      z-index: 10;
      opacity: 0.75;
    }

    .bgBottom {
      z-index: 5;
    }

    .wave {
      position: absolute;
      left: 0;
      width: 200%;
      height: 100%;
      background-repeat: repeat no-repeat;
      background-position: 0 bottom;
      transform-origin: center bottom;
    }

    .waveTop {
      background-size: 50% 100px;
    }

    .waveAnimation .waveTop {
      animation: move-wave 3s;
      -webkit-animation: move-wave 3s;
      -webkit-animation-delay: 1s;
      animation-delay: 1s;
    }

    .waveMiddle {
      background-size: 50% 120px;
    }

    .waveAnimation .waveMiddle {
      animation: move_wave 10s linear infinite;
    }

    .waveBottom {
      background-size: 50% 100px;
    }

    .waveAnimation .waveBottom {
      animation: move_wave 15s linear infinite;
    }
  </style>

</head>

<body>

  <div class="waveWrapper waveAnimation">
    <div class="waveWrapperInner bgTop">
      <div class="wave waveTop" style="background-image: url('img/wave-top.png')"></div>
    </div>
    <div class="waveWrapperInner bgMiddle">
      <div class="wave waveMiddle" style="background-image: url('img/wave-mid.png')"></div>
    </div>
    <div class="waveWrapperInner bgBottom">
      <div class="wave waveBottom" style="background-image: url('img/wave-bot.png')"></div>
    </div>
  </div>

</body>

</html>

在这里插入图片描述

以上是关于css实现圆形水纹波动效果的主要内容,如果未能解决你的问题,请参考以下文章

WPF 实现水纹效果

万彩动画大师教程 | 如何实现文字图片的水纹的强调动画效果

帮我更改一下button点击效果 水纹效果。

canvas实现点击带水纹的按钮

Android之BottomNavigationView实现底部按钮水纹波效果

Android 高手进阶,自己定义圆形进度条