HTMLCSS模板实现水滴动画效果

1. .container 类：定义了页面的容器样式。
   • display: flex：使容器成为弹性容器，方便对其子元素进行布局。
   • justify-content: center 和 align-items: center：分别使子元素在水平和垂直方向上居中对齐。
   • min-height: 100vh：设置容器的最小高度为视口高度的 100%，确保页面内容能覆盖整个视口。
   • background-color: #000：设置容器的背景颜色为黑色。
   • flex-direction: column：使子元素在容器中以垂直方向排列。
   • filter: contrast(30)：增加元素的对比度，这里将对比度设置为 30。
2. .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 秒，线性播放，无限循环。
3. .drop 类的子元素选择器：通过 :nth-child 选择器分别对不同的 .drop 元素设置了不同的位置偏移和动画延迟，使它们的动画效果略有不同，增加了视觉层次感。
4. .collection 类：定义了另一个圆形元素的样式。
   • 基本样式与 .drop 类似，也设置了宽度、高度、圆角、模糊效果和背景颜色。
   • animation: 3s collection linear infinite：应用名为 collection 的动画，动画持续时间为 3 秒，线性播放，无限循环。
5.  元素：设置为绝对定位，用于显示文本内容，但 font-style: 30px 这里可能存在错误，应该是 font-size 用于设置字体大小，猜测是想设置字体大小为 30 像素。

动画效果

1. @keyframes drop：定义了 .drop 元素的动画关键帧。
   • 在 0% 处，元素缩小到 0.7 倍并向上移动 600%，透明度为 0。
   • 在 50% 处，元素缩小到 0.4 倍并向上移动 8%，透明度变为 1。
   • 在 100% 处，元素缩小到 0.3 倍并回到初始垂直位置，透明度保持为 1。
2. @keyframes collection：定义了 .collection 元素的动画关键帧。
   • 在 0% 处，元素保持初始大小和旋转角度。
   • 在 50% 处，元素放大到 1.3 倍并旋转 180 度，同时宽度变为 90 像素，边框的圆角也进行了调整。
   • 在 100% 处，元素恢复到初始大小并旋转 360 度。

完整代码展示

    
    
    
    
    



    

        

        

        


        

        80%