这是一款杯子注水的波浪动画,基于纯 CSS 实现。画面中央是一只带白色描边和把手的杯子,杯内水面呈波浪起伏,随着动画循环缓缓上升又回落,模拟出注水与晃动的自然感;杯身圆角、投影与高光共同营造出立体质感。整个效果只用一个标签加一段关键帧动画完成,通过背景位移驱动波纹横向流动与水位变化,代码极简、易于嵌入,改动尺寸、配色和动画时长即可调整节奏与风格。适用于网页加载等待动画、进度提示、饮品与健康类专题页、喝水打卡类小工具及趣味装饰元素等场景。
编号:CSS注水动画
杯子注水波浪动画(纯CSS水位上升特效)
| 大小 | 10 KB |
| 总文件 | 5 个 |
| 发布 | 2026-08-23 |
| 更新 | 2026-08-23 |
| 架构 | CSS |
| 分类 | 前端资源 - 加载与上传 |
| 目录 | 结构详情 |