前端实战小案例--海洋球水波纹效果_前端ui库水波纹球-优快云博客

【转载】：https://www.bilibili.com/video/BV1Hp4y1Y7g6

文章目录

前端实战小案例--海洋球水波纹效果
- 效果图
- 代码

前端实战小案例–海洋球水波纹效果

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>海洋球水波纹</title>
    <style type="text/css">
      *{
        padding:0;
        margin:0;
      }
      body{
        display:flex;
        justify-content:center;
        align-items: center;
        height: 100vh;
        background-image: linear-gradient(rgb(90, 90, 250),rgb(3, 3, 110));
      }
      .container, .mave{
        width: 200px;
        height: 200px;
        border-radius: 50%;
      }
      .container{
        border:3px solid darkturquoise;
        padding: 10px;
      }
      .mave{
        position:relative;
        background-color: skyblue;
        overflow: hidden;
      }
      .mave::before{
        content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        top:0px;
        left: 50%;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 40%;
        transform: translate(-50%,-60%);
        animation: mave 5s linear infinite;

      }
      .mave::after{
        content: "oceanBall";
        position: absolute;
        top:30px;
        left:50%;
        color:darkturquoise;
        font-size: 700;
        transform: translate(-50%,0);
      }
      @keyframes mave {
        100%{
          transform: translate(-50%,-60%) rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="mave">
      </div>
    </div>
  </body>
</html>