您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

CSS 水波纹效果实现

时间：12-14来源：作者：点击数：

原理

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>

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

来顶一下

返回首页

考了这些证书的可享个	怎样用 PS 把电子文档
记录在本地电脑部署自	围棋入门教程十天即