用css3的@keyframe实现一个滴水效果
（这gif结束和开始连接有点卡顿）
<div class="drop"> <div class="mother"></div> <div class="water"></div> <div class="water"></div> <div class="water"></div> </div>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.drop {
height: 100vh;
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
filter: contrast(30);
}
.mother{
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 50%;
filter: blur(20px);
}
.water{
width: 60px;
height: 60px;
border-radius: 50%;
background-color: white;
z-index: 999;
filter: blur(20px);
}
.water:nth-child(2){
position: absolute;
top: 400px;
animation: drop 3s infinite ease-in-out;
}
.water:nth-child(3){
position: absolute;
top: 400px;
animation: drop 3s 1s infinite ease-in-out;
}
.water:nth-child(4){
position: absolute;
top: 400px;
animation: drop 3s 2s infinite ease-in-out;
}
@keyframes drop{
0%{
top: 380px;
}
36%{
height: 90px;
}
40%{
height: 80px;
}
45%{
height: 70px;
}
50%{
height: 60px;
}
100%{
transform: translate(0,250px) scale(0.5);
height: 20px;
width: 50px;
}
}
想法：
设置四个圆，第一个为母体，其他三个为水滴。
先让他们高斯模糊fliter:blur()，再提高他们对比度filter:contrast()，目的是让水滴出来的时候更加自然
使用过渡动画：translate改变水滴的位置，scale改变水滴大小
最后使用keyframe实现
标签：css3,filter,效果,滴水,drop,height,water,top,水滴 From： https://www.cnblogs.com/karle/p/16858192.html