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>