css制作滴水动画 |css vw vh一起用

/* CSS代码 */
.waterdrop {
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #00a1ff;
}
.waterdrop:before,
.waterdrop:after {
content: "";
position: absolute;
background-color: #fff;
width: 25px;
height: 25px;
border-radius: 50%;
}
.waterdrop:before {
top: -5px;
left: 10px;
}
.waterdrop:after {
top: 15px;
left: 10px;
}
.waterdrop.animate:before {
animation: animate1 1s ease-in-out forwards;
}
.waterdrop.animate:after {
animation: animate2 1s ease-in-out forwards;
}
@keyframes animate1 {
0% {
transform: translateY(0) scale(1);
}
25% {
transform: translateY(-15px) scale(0.9);
}
50% {
transform: translateY(0) scale(1);
}
75% {
transform: translateY(-10px) scale(0.95);
}
100% {
transform: translateY(0) scale(1);
}
}
@keyframes animate2 {
0% {
transform: translateY(0) scale(1);
}
25% {
transform: translateY(15px) scale(0.9);
}
50% {
transform: translateY(0) scale(1);
}
75% {
transform: translateY(10px) scale(0.95);
}
100% {
transform: translateY(0) scale(1);
}
}

这段CSS代码主要定义了一个水滴形状的元素，并使用伪元素:before和:after来实现滴水效果。大家需要定义两个: 前一个伪元素用于水滴上部分的滴水效果，后一个伪元素用于下方的滴水效果。

在CSS代码的最后，大家定义了两个动画：animate1和animate2。这些动画定义了每个滴水效果的过渡效果。然后大家将这些动画应用到伪元素，然后使用class为waterdrop animate来激活这些动画。

在HTML中，大家只需要为一个水滴元素添加类为waterdrop即可实现滴水动画效果。

这样大家就可以使用CSS实现优美的滴水动画效果，使大家的页面更加生动活泼。