前端常见效果实现
波浪涟漪特效及衍生的声波效果
实现原理：将盒子初始宽高设为0，通过css3动画将盒子宽高变大，再通过css变量控制下一个盒子开始变化的时间，即可实现涟漪效果。
代码如下：
<div class="container">
<div class="box">
<span style="--i:1"></span>
<span style="--i:2"></span>
<span style="--i:3"></span>
<span style="--i:4"></span>
<span style="--i:5"></span>
<span style="--i:6"></span>
<span style="--i:7"></span>
<span style="--i:8"></span>
<span style="--i:9"></span>
<span style="--i:10"></span>
</div>
</div>/*实际情况中使用了重置样式表清除了默认样式*/
body {
background-color: #000;
height: 100vh;
width: 100vw;
}
.container .box {
width: 500px;
height: 500px;
margin:0 auto;
position: relative;
}
.container .box span {
border: 2px solid #fff;
border-radius: 50%;
/*使用定位让每个span在box中居中*/
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
/*设置span的初始宽高，不然开始会出现一段时间的边框*/
width: 0;
height: 0;
animation: animate 5s linear infinite;/*设置重复动画*/
animation-delay: calc(0.5s*var(--i))/*通过i变量控制每个盒子变化的时间间隔*/
}
@keyframes animate {
0% {
width: 0;
height: 0;
opacity: 1;/*透明度改变*/
}
100% {
width: 500px;
height: 500px;
opacity: 0;
}
}效果如图：
上面是用过定位让每个span在box中居中，还可以通过flex布局实现，将其中两个样式改为如下即可。
这里需要注意的是span仍需要通过绝对定位将每个span脱离文档流，不然无法实现居中的效果。
.container .box {
width: 500px;
height: 500px;
margin:0 auto;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.container .box span {
position: absolute;
border: 2px solid #fff;
border-radius: 50%;
animation: animate 5s linear infinite;
animation-delay: calc(0.5s*var(--i))
}衍生的其他效果
在上面的基础上，通过改变span的初始位置及旋转box的角度，实现喇叭效果，代码如下：
.container .box {
width: 500px;
height: 500px;
margin:0 auto;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transform:rotate(-45deg);/*将box旋转-45度*/
}
.container .box span {
position: absolute;
top: 0;/*改变span位置*/
left: 0;
border: 2px solid #fff;
border-radius: 50%;
animation: animate 5s linear infinite;
animation-delay: calc(0.5s*var(--i))
}效果如图：
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>波浪涟漪</title>
<link rel="stylesheet" href="../reset.css">
<style>
body {
background-color: #000;
height: 100vh;
width: 100vw;
}
.container .box {
width: 500px;
height: 500px;
margin:0 auto;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.container .box span {
position: absolute;
border: 2px solid #fff;
border-radius: 50%;
animation: animate 5s linear infinite;
animation-delay: calc(0.5s*var(--i))
}
.container .box:nth-child(2) {
width: 500px;
height: 500px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transform: rotate(-45deg)
}
.container .box:nth-child(2) span {
position: absolute;
top: 0;
left: 0;
border: 2px solid #fff;
border-radius: 50%;
animation: animate 5s linear infinite;
animation-delay: calc(0.5s*var(--i))
}
@keyframes animate {
0% {
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 500px;
height: 500px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<span style="--i:1"></span>
<span style="--i:2"></span>
<span style="--i:3"></span>
<span style="--i:4"></span>
<span style="--i:5"></span>
<span style="--i:6"></span>
<span style="--i:7"></span>
<span style="--i:8"></span>
<span style="--i:9"></span>
<span style="--i:10"></span>
</div>
<div class="box">
<span style="--i:1"></span>
<span style="--i:2"></span>
<span style="--i:3"></span>
<span style="--i:4"></span>
<span style="--i:5"></span>
<span style="--i:6"></span>
<span style="--i:7"></span>
<span style="--i:8"></span>
<span style="--i:9"></span>
<span style="--i:10"></span>
</div>
</div>
</body>
</html>