css实现圆形水纹波动效果

最新推荐文章于 2024-06-20 14:09:55 发布

晚星@

最新推荐文章于 2024-06-20 14:09:55 发布

阅读量953

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/asd577007722/article/details/116765115

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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>

在这里插入图片描述

晚星@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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) }
复制链接

扫一扫

专栏目录