当前位置： 首页 > article >正文

HTMLCSS模板实现水滴动画效果

article 2025/10/15 14:59:05
  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. <span> 元素：设置为绝对定位，用于显示文本内容，但 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 度。

完整代码展示

<!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>

 

相关文章：

HTMLCSS模板实现水滴动画效果

.container 类&#xff1a;定义了页面的容器样式。 display: flex&#xff1a;使容器成为弹性容器&#xff0c;方便对其子元素进行布局。justify-content: center 和 align-items: center&#xff1a;分别使子元素在水平和垂直方向上居中对齐。min-height: 100vh&#xff1a;设…...

编程日记 2025/9/27 4:55:44

Cesium实现地形可视域分析

Cesium实现可视化分析 一、地形可视域主要实现技术（Ray + 地形碰撞检测） Cesium 本身的 Ray 类可以用来执行非常精确的射线检测，我们可以结合地形高度（sample）来逐点检测光线是否与 terrain 相交，从而判断是否可见。 1.1 优势 实时判断每条射线是否被 terrain 遮挡地形…...

编程日记 2025/8/4 1:49:37

前端如何获取文件的 Hash 值？多种方式详解、对比与实践指南

文章目录 前言一、Hash 值为何重要&#xff1f;二、Hash 值基础知识2.1 什么是 Hash&#xff1f;2.2 Hash 在前端的应用场景2.3 常见的 Hash 算法&#xff08;MD5、SHA 系列&#xff09; 三、前端获取文件 Hash 的常用方式3.1 使用 SparkMD5 计算 MD5 值3.2 使用 Web Crypto AP…...

编程日记 2025/10/11 0:30:05

【数据可视化艺术·应用篇】三维管线分析如何重构城市“生命线“管理？

在智慧城市、能源管理、工业4.0等领域的快速发展中&#xff0c;地下管线、工业管道、电力通信网络等“城市血管”的复杂性呈指数级增长。传统二维管理模式已难以应对跨层级、多维度、动态变化的管线管理需求。三维管线分析技术应运而生&#xff0c;成为破解这一难题的核心工具。…...

编程日记 2025/9/27 8:14:40

蓝桥杯 16.对局匹配

对局匹配 原题目链接 题目描述 小明喜欢在一个围棋网站上找别人在线对弈。这个网站上所有注册用户都有一个积分&#xff0c;代表他的围棋水平。 小明发现&#xff0c;网站的自动对局系统在匹配对手时&#xff0c;只会将积分差恰好是 K 的两名用户匹配在一起。如果两人分差小…...

编程日记 2025/7/26 22:05:47

【MinerU】：一款将PDF转化为机器可读格式的工具——RAG加强（Docker版本）

目录 创建容器 安装miniconda 安装mineru CPU运行 GPU加速 多卡问题 创建容器 构建Dockerfile文件 开启ssh服务&#xff0c;设置密码为1234等操作 # 使用官方 Ubuntu 24.04 镜像 FROM ubuntu:24.04# 安装基础工具和SSH服务 RUN apt-get update && \apt-get ins…...

编程日记 2025/9/27 4:53:40

DeepSeek回答过于笼统，提示词如何优化

针对DeepSeek回答过于笼统的问题&#xff0c;可通过以下方法优化&#xff0c;使输出更具体、详细&#xff1a; 一、优化提示词设计 明确具体要求 在提问中嵌入「背景限制示例」&#xff0c;例如&#xff1a; “作为跨境电商运营新手&#xff0c;请详细说明如何优化亚马逊产品标…...

编程日记 2025/6/13 12:54:38

C语言实现贪心算法

一、贪心算法核心思想 特征&#xff1a;在每一步选择中都采取当前状态下最优&#xff08;局部最优&#xff09;的选择&#xff0c;从而希望导致全局最优解 适用场景&#xff1a;需要满足贪心选择性质和最优子结构性质 二、经典贪心算法示例 1. 活动选择问题 目标&#xff1a…...

编程日记 2025/9/12 7:50:15

全球碳化硅晶片市场深度解析：技术迭代、产业重构与未来赛道争夺战（2025-2031）

一、行业全景&#xff1a;从“材料突破”到“能源革命”的核心引擎 碳化硅&#xff08;SiC&#xff09;作为第三代半导体材料的代表&#xff0c;凭借其宽禁带&#xff08;3.26eV&#xff09;、高临界击穿场强&#xff08;3MV/cm&#xff09;、高热导率&#xff08;4.9W/cmK&…...

编程日记 2025/10/6 7:02:59

FreeRTOS学习笔记【10】-----任务上下文切换

1 概念性内容 开机到调度需要经历的步骤有&#xff1a; 系统初始化任务创建启动调度器上下文切换时间分片任务执行 1.1 任务本质 FreeRTOS 的 任务&#xff08;Task&#xff09;本质上就是一个运行在任务自己的栈区中无限循环的函数 一段上下文&#xff08;context&#x…...

编程日记 2025/9/8 5:39:52

Appium自动化开发环境搭建

自动化 文章目录 自动化前言 前言 Appium是一款开源工具&#xff0c;用于自动化iOS、Android和Windows桌面平台上的本地、移动web和混合应用程序。原生应用是指那些使用iOS、Android或Windows sdk编写的应用。移动网页应用是通过移动浏览器访问的网页应用(appum支持iOS和Chrom…...

编程日记 2025/9/27 9:19:00

C++学习-入门到精通-【1】C++编程入门，输入/输出和运算符

C学习-入门到精通-【1】C编程入门&#xff0c;输入/输出和运算符 C编程入门&#xff0c;输入/输出和运算符 C学习-入门到精通-【1】C编程入门&#xff0c;输入/输出和运算符第一个C程序&#xff1a;输出一行文本算术运算 第一个C程序&#xff1a;输出一行文本 // 文本打印程序…...

编程日记 2025/10/5 11:13:03

UOJ 228 基础数据结构练习题 Solution

Description 给定序列 a ( a 1 , a 2 , ⋯ , a n ) a(a_1,a_2,\cdots,a_n) a(a1​,a2​,⋯,an​)&#xff0c;有 m m m 个操作分三种&#xff1a; add ⁡ ( l , r , k ) \operatorname{add}(l,r,k) add(l,r,k)&#xff1a;对每个 i ∈ [ l , r ] i\in[l,r] i∈[l,r] 执行 …...

编程日记 2025/10/7 23:11:06

面向高性能运动控制的MCU：架构创新、算法优化与应用分析

摘要&#xff1a;现代工业自动化、汽车电子以及商业航天等领域对运动控制MCU的性能要求不断提升。本文以国科安芯的MCU芯片AS32A601为例&#xff0c;从架构创新、算法优化到实际应用案例&#xff0c;全方位展示其在高性能运动控制领域的优势与潜力。该MCU以32位RISC-V指令集为基…...

编程日记 2025/10/2 3:25:15

某地农产品交易中心钢网架自动化监测项目

1. 项目简介 本项目规划建设现代物流产业园&#xff0c;新建6万平方米仓库&#xff0c;具体为新建3栋钢构仓库2万平方米&#xff0c;2栋砖混结构仓库1万平方米&#xff0c;3栋交易中心2万平方米&#xff0c;改造现有3栋3层砖混结构仓库1万平方米&#xff0c;配备智能化仓库物流…...

编程日记 2025/10/3 12:12:55

【无人机】无人机位置估计出现偏差的原因分析

目录 #0、原因分析 #1、过度振动的测定 #2、确定过度陀螺仪偏差 #3、偏航精度差的测定 #4、确定 GPS 精度差 #5、确定 GPS 数据丢失 #6、气压计地面效应补偿 #0、原因分析 位置背离的最常见原因是&#xff1a; 参考&#xff1a;Using the ECL EKF | PX4 Guide (v1.15)…...

编程日记 2025/9/26 17:22:24

element-plus(vue3)表单el-select下拉框的远程分页下拉触底关键字搜索实现

一、基础内核-自定义指令 1.背景 2.定义 3.使用 4.注意 当编辑时需要回显&#xff0c;此时由于分页导致可能匹配不到对应label文本显示&#xff0c;此时可以这样解决 二、升级使用-二次封装组件 三、核心代码 1.自定义指令 定义 ----------------selectLoadMoreDirective.…...

编程日记 2025/10/9 14:26:25

轻松完成视频创作,在线视频编辑器,无需下载软件,功能多样实用!

小白工具的在线视频编辑https://www.xiaobaitool.net/videos/edit/ 功能丰富、操作简便&#xff0c;在线裁剪或编辑视频工具&#xff0c;轻松完成视频创作能满足多种视频编辑需求。 格式支持广泛&#xff1a;可编辑超百种视频格式&#xff0c;基本涵盖常见和小众视频格式&#…...

编程日记 2025/9/27 1:02:17

高精度运算

1.乘法 #include <bits/stdc.h> using namespace std;char s1[2000], s2[2000]; int a[2000], b[2000], c[4000];int main() {cin >> s1 >> s2;int ls1 strlen(s1);int ls2 strlen(s2);int ls3 ls1 ls2;// 将字符串 s1 和 s2 转换为数组 a 和 bfor (int…...

编程日记 2025/7/10 3:31:36

express的模板handlebars用app.engine()创建配置和用exphbs.create()的区别

在使用 express-handlebars 时&#xff0c;app.engine 和 exphbs.create 都可以用来配置 Handlebars 模板引擎&#xff0c;但它们的使用方式和功能有一些区别。以下是详细的对比和说明 app.engine 方法 app.engine 是 Express 提供的方法&#xff0c;用于注册一个新的模板引擎…...

编程日记 2025/7/10 2:52:46

豆瓣图书数据采集与可视化分析（三）- 豆瓣图书数据统计分析

文章目录 前言一、数据读取与保存1. 读取清洗后数据2. 保存数据到CSV文件3. 保存数据到MySQL数据库 二、不同分类统计分析1. 不同分类的图书数量统计分析2. 不同分类的平均评分统计分析3. 不同分类的平均评价人数统计分析4. 不同分类的平均价格统计分析5. 分类综合分析 三、不同…...

编程日记 2025/9/30 15:32:23

聊透多线程编程-线程互斥与同步-13. C# Mutex类实现线程互斥

目录 一、什么是临界区&#xff1f; 二、Mutex类简介 三、Mutex的基本用法 解释&#xff1a; 四、Mutex的工作原理 五、使用示例1-保护共享资源 解释&#xff1a; 六、使用示例2-跨进程同步 示例场景 1. 进程A - 主进程 2. 进程B - 第二个进程 输出结果 ProcessA …...

编程日记 2025/9/22 21:15:34

Sql刷题日志（day5）

面试&#xff1a; 1、从数据分析角度&#xff0c;推荐模块怎么用指标衡量&#xff1f; 推荐模块主要目的是将用户进行转化&#xff0c;所以其主指标是推荐的转化率推荐模块的指标一般都通过埋点去收集用户的行为并完成相应的计算而形成相应的指标数据&#xff0c;而这里的驱动…...

编程日记 2025/9/20 23:20:48

【Test】单例模式❗

文章目录 1. 单例模式2. 单例模式简单示例3. 懒汉模式4. 饿汉模式5. 懒汉式和饿汉式的区别 1. 单例模式 &#x1f427;定义&#xff1a;保证一个类仅有一个实例&#xff0c;并提供一个访问它的全局访问点。 单例模式是一种常用的软件设计模式&#xff0c;在它的核心结构中只包…...

编程日记 2025/10/14 2:20:50

c++进阶——类与继承

文章目录 继承继承的基本概念继承的基本定义继承方式继承的一些注意事项 继承类模板 基类和派生类之间的转换继承中的作用域派生类的默认成员函数默认构造函数拷贝构造赋值重载析构函数默认成员函数总结 不能被继承的类继承和友元继承与静态成员多继承及其菱形继承问题继承模型…...

编程日记 2025/10/6 15:09:17

虚拟滚动；懒加载；高并发组件

虚拟滚动的实现 思路&#xff1a;它只渲染当前可视区域内的元素&#xff0c;而不是整个列表&#xff0c;滚动时计算出应该显示哪些元素 原生JS class VirtualScroll {constructor(container, items, itemHeight, renderItem) {this.container container;this.items items;t…...

编程日记 2025/10/8 5:20:43

复杂地形越野机器人导航新突破！VERTIFORMER：数据高效多任务Transformer助力越野机器人移动导航

作者&#xff1a; Mohammad Nazeri 1 ^{1} 1, Anuj Pokhrel 1 ^{1} 1, Alexandyr Card 1 ^{1} 1, Aniket Datar 1 ^{1} 1, Garrett Warnell 2 , 3 ^{2,3} 2,3, Xuesu Xiao 1 ^{1} 1单位&#xff1a; 1 ^{1} 1乔治梅森大学计算机科学系&#xff0c; 2 ^{2} 2美国陆军研究实验室&…...

编程日记 2025/9/28 2:20:12

Jsp技术入门指南【十】IDEA 开发环境下实现 MySQL 数据在 JSP 页面的可视化展示，实现前后端交互

Jsp技术入门指南【十】IDEA 开发环境下实现 MySQL 数据在 JSP 页面的可视化展示&#xff0c;实现前后端交互 前言一、JDBC 核心接口和类&#xff1a;数据库连接的“工具箱”1. 常用的 2 个“关键类”2. 必须掌握的 5 个“核心接口” 二、创建 JDBC 程序的步骤1. 第一步&#xf…...

编程日记 2025/10/7 11:42:49

数据库未正常关闭后，再次启动时只有主进程，数据库日志无输出

瀚高数据库 目录 环境 症状 问题原因 解决方案 环境 系统平台&#xff1a;银河麒麟svs&#xff08;X86_64&#xff09; 版本&#xff1a;4.5.8 症状 现象&#xff1a;使用pg_ctl stop停止数据库&#xff0c;未正常关闭&#xff1b;使用pg_ctl stop -m i 强制关闭数据库后&…...

编程日记 2025/10/2 2:23:16

【信息系统项目管理师】高分论文：论成本管理与采购管理（信用管理系统）

更多内容请见： 备考信息系统项目管理师-专栏介绍和目录 文章目录 论文1、规划成本管理2、成本估算3、成本预算4、成本控制论文 2019年1月，我作为项目经理参与了 XX基金管理有限公司信用管理系统项目。该项目成 本1000万，建设期为1年。通过该项目，XX基金管理有限公司在信用…...

编程日记 2025/7/16 19:21:41