阅读 2854
CSS水波纹效果实现

CSS水波纹效果实现

效果

原理

CSS水波纹实现,使用了border-radius属性,构造一个接近圆的不规则图形,然后使用动画,让其绕Z轴不断旋转,以达到一种波浪运动的视觉效果。

实现

<!DOCTYPE html>
<html>
<head>
  <title>水波纹效果</title>
  <style type="text/css">
      body {
          margin: 0;
          padding: 0;
          min-height: 100vh;
          position: relative;
          background-color: rgb(118, 218, 255);
          overflow: hidden;
      }
      body::before, body::after {
          content: '';
          position: absolute;
          bottom: 15vh;
          min-width: 300vw;
          min-height: 300vw;
          background-color: #FFFFFF;
          animation: rote 10s linear infinite;
      }
      body::before {
          left: -95%;
          border-radius: 45%;
          opacity: .5;
      }
      body::after {
          left: -95%;
          border-radius: 46%;
      }
      @keyframes rote {
          from {
              transform: rotateZ(0);
          }
          to {
              transform: rotateZ(360deg);
          }
      }
  </style>
</head>
<body></body>
</html>
复制代码

我这里只做个简单记录,更详细的可以查看link

文章分类
前端
文章标签