Lazy loaded image
一个好看的气泡上浮动画
Words 196Read Time 1 min
2025-3-13
2025-3-13
type
status
date
slug
summary
tags
category
icon
password

效果

 
notion image

React代码

Array.from({ length: 40 }) length为气泡的总数

定义css变量

--bubble-size 气泡大小
--bubble-left x轴偏移位置
--bubble-delay 动画延迟执行时间
--bubble-duration 动画执行时间
--bubble-opacity 气泡透明度
--bubble-translateY y轴消失的位置

Css样式

上一篇
视频加载优化Hls以及踩坑点
下一篇
通知栏定时更新数据