HTMLCSS模板实现水滴动画效果
.container类：定义了页面的容器样式。display: flex：使容器成为弹性容器，方便对其子元素进行布局。justify-content: center和align-items: center：分别使子元素在水平和垂直方向上居中对齐。min-height: 100vh：设置容器的最小高度为视口高度的 100%，确保页面内容能覆盖整个视口。background-color: #000：设置容器的背景颜色为黑色。flex-direction: column：使子元素在容器中以垂直方向排列。filter: contrast(30)：增加元素的对比度，这里将对比度设置为 30。
.drop类：定义了页面中类似水滴的元素样式。width: 100px和height: 100px：设置元素的宽度和高度均为 100 像素。border-radius: 50%：将元素的边框设置为圆形，使其看起来像水滴。position: absolute：将元素设置为绝对定位，方便在页面中精确控制其位置。filter: blur(20px)：对元素应用模糊效果，使其边缘看起来更柔和。background-color: #fff：设置元素的背景颜色为白色。opacity: 0：初始时元素的透明度为 0，即不可见。animation: 2.5s drop linear infinite：应用名为drop的动画，动画持续时间为 2.5 秒，线性播放，无限循环。
.drop类的子元素选择器：通过:nth-child选择器分别对不同的.drop元素设置了不同的位置偏移和动画延迟，使它们的动画效果略有不同，增加了视觉层次感。.collection类：定义了另一个圆形元素的样式。- 基本样式与
.drop类似，也设置了宽度、高度、圆角、模糊效果和背景颜色。 animation: 3s collection linear infinite：应用名为collection的动画，动画持续时间为 3 秒，线性播放，无限循环。
- 基本样式与
<span>元素：设置为绝对定位，用于显示文本内容，但font-style: 30px这里可能存在错误，应该是font-size用于设置字体大小，猜测是想设置字体大小为 30 像素。
动画效果
@keyframes drop：定义了.drop元素的动画关键帧。- 在 0% 处，元素缩小到 0.7 倍并向上移动 600%，透明度为 0。
- 在 50% 处，元素缩小到 0.4 倍并向上移动 8%，透明度变为 1。
- 在 100% 处，元素缩小到 0.3 倍并回到初始垂直位置，透明度保持为 1。
@keyframes collection：定义了.collection元素的动画关键帧。- 在 0% 处，元素保持初始大小和旋转角度。
- 在 50% 处，元素放大到 1.3 倍并旋转 180 度，同时宽度变为 90 像素，边框的圆角也进行了调整。
- 在 100% 处，元素恢复到初始大小并旋转 360 度。
完整代码展示
<!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"><link rel="stylesheet" href="./assets/global.css"><style>.container {display: flex;justify-content: center;align-items: center;min-height: 100vh;background-color: #000;flex-direction: column;filter: contrast(30);}.drop {width: 100px;height: 100px;border-radius: 50%;position: absolute;filter: blur(20px);background-color: #fff;opacity: 0;animation: 2.5s drop linear infinite;}.drop:nth-child(2) {transform: translateY(-80px);animation-delay: .5s;}.drop:nth-child(3) {transform: translateY(-130px);animation-delay: .7s;}.collection {width: 100px;height: 100px;border-radius: 50%;background-color: #fff;filter: blur(20px);animation: 3s collection linear infinite;}span {position: absolute;font-style: 30px;}@keyframes drop {0% {transform: scale(.7) translateY(-600%);opacity: 0;}50% {transform: scale(.4) translateY(-8%);opacity: 1;}100% {transform: scale(.3) translateY(0%);opacity: 1;}}@keyframes collection {0% {transform: scale(1) rotate(0deg)}50% {transform: scale(1.3) rotate(180deg);width: 90px;border-top-left-radius: 40%;border-bottom-right-radius: 45%;}100% {transform: scale(1) rotate(360deg);}}</style>
</head><body><div class="container"><div class="drop"></div><div class="drop"></div><div class="drop"></div><div class="collection"></div><span>80%</span></div>
</body></html> 