今天又学习了一个特效，有点类似安卓手机充电时的特效，就叫做水滴充电特效把
效果图：
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水滴充电特效</title>
<style>
html{
font-size: 10px;
}
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
background-color: #000;
filter:contrast(50);
}
.drop{
width: 20rem;
height: 20rem;
position: absolute;
background-color: #3bff5a;
border-radius: 50%;
filter: blur(20px);
opacity: 0;
animation: 3s drop linear infinite;
transform: scale(1.2) translateY(-500%);
}
.drop:nth-child(2){
animation-delay: 0.8s;
}
.drop:nth-child(3){
animation-delay: 1.1s;
}
.collection{
width: 20rem;
height: 20rem;
background-color:#3bff5a;
border-radius: 50%;
filter: blur(20px);
animation: 5s collection linear infinite;
}
.container span{
position: absolute;
font-size: 2.5rem;
font-family: 'Helvetica Neue', Hel;
font-weight: bold;
}
@keyframes drop {
0%{
opacity: 0;
transform: scale(1) translateY(-600%);
}
50%{
opacity: 1;
transform: scale(.5) translateY(-100%);
}
100%{
transform: scale(.3) translateY(0);
}
}
@keyframes collection {
0%{
width: 20rem;
transform: scale(1) rotate(0);
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
50%{
width: 18rem;
transform: scale(1.2) rotate(180deg);
border-top-left-radius: 30%;
border-bottom-left-radius: 60%;
}
100%{
width: 20rem;
transform: scale(1) rotate(360deg);
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="collection"></div>
<span>充电中</span>
</div>
</body>
</html>
