[25天] 巧用border-radius实现波浪加载_HTML/CSS_西西优一点

HTML/CSS[25天] 巧用border-radius实现波浪加载

[25天] 巧用border-radius实现波浪加载

阅读：722 时间：2022年06月10日

先看看只用了一个div加上css实现的效果：由于录制gif体积较大，所以只录了加载到一半的效果。先帖上完整代码，如果不好读后面有大致的思路说明：<!DOCTYPE html> <html lang="en"&g...

先看看只用了一个div加上css实现的效果：

chrome-capture (15).gif

由于录制gif体积较大，所以只录了加载到一半的效果。

先帖上完整代码，如果不好读后面有大致的思路说明：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
html,body{
  background-color: #1d2129;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes waves{
  from{
    transform: translateX(-50%) translateY(25%) rotate(0deg);
    border-radius: 40%;
  }
  to{
    transform: translateX(-50%) translateY(-25%) rotate(720deg);
    border-radius: 50%;
  }
}
.loading{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #20ec19;
  background-image: linear-gradient(90deg, #20ec19, #1162a5);
  box-shadow: 0 0 0 1px #24721c, 0 0 0 10px #3c4557, 0 20px 30px #030711;
  position: relative;
  overflow: hidden;
}
.loading::before{
  position: absolute;
  content: '';
  width: 400px;
  height: 400px;
  border-radius: 45%;
  background-color: #1d2129;
  left: 50%;
  transform: translateX(-50%);
  top: -150%;
  animation: waves 10s linear infinite;
  box-shadow: 0 0 5px #20ec19, 0 0 15px #4bd346 inset;
}
  </style>
</head>
<body>
  <div class="loading"></div>
</body>
</html>

说一下实现的思路

波浪效果是用球的背景加另一个圆角矩形叠加的效果

先准备一个加载的球

<div class="loading"></div>

  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #20ec19;
  background-image: linear-gradient(90deg, #20ec19, #1162a5);
  box-shadow: 0 0 0 1px #24721c, 0 0 0 10px #3c4557, 0 20px 30px #030711;
  border: 1px solid #fff;
  position: relative;
  overflow: hidden;

再准备一个用来叠加的元素，可以直接使用伪元素CSS

.loading::before{
  position: absolute;
  content: '';
  width: 400px;
  height: 400px;
  border-radius: 45%;
  background-color: #1d2129;
  left: 50%;
  transform: translateX(-50%);
  top: -150%;
  animation: waves 10s linear infinite;
  box-shadow: 0 0 5px #20ec19, 0 0 15px #4bd346 inset;
}

看下示意图

微信截图_20220610164223.jpg

将白球的背景色设为水的颜色，将叠加绿色圆角矩形的背景色设空无水的空白颜色。两者再叠加就是波浪的效果。

怎么让波浪动起来呢

给绿色圆角矩形添加旋转动画，并改变圆角大小。波浪就涌起来了。

@keyframes waves{
  from{
    transform: translateX(-50%) translateY(25%) rotate(0deg);
    border-radius: 40%;
  }
  to{
    transform: translateX(-50%) translateY(-25%) rotate(720deg);
    border-radius: 50%;
  }
}

chrome-capture (16).gif