超轻量级Canvas波浪动画(仅2KB,纯JS实现)

波浪线

超轻量级Canvas波浪动画(仅2KB,纯JS实现)

这是一款极简的波浪动画效果,基于纯JavaScript和Canvas技术实现,代码精简至2KB,不依赖任何第三方库。它的特点是高性能、低资源占用,适合嵌入网页背景、数据可视化或微交互场景,能为静...

WebGL 实现弹窗以火焰燃烧特效消失效果 - 让DOM元素动态燃起来

燃烧弹出框

WebGL 实现弹窗以火焰燃烧特效消失效果 - 让DOM元素动态燃起来

这是一款主要基于WebGL+GSAP+three.js技术实现的动态火焰燃烧特效,可让弹窗(Pop-Up)、按钮或其他DOM元素在点击交互时呈现逼真的燃烧动画消失效果。火焰可随交互实时变化,支持...

GSAP SVG小脚丫脚步光标跟随特效源码下载

脚丫光标

GSAP SVG小脚丫脚步光标跟随特效源码下载

这是一款优雅的鼠标光标路径跟随效果,通过SVG路径动画与GSAP平滑缓动技术实现,让小脚丫像跳芭蕾般精准踩踏用户光标移动轨迹,适用于高端产品展示页、创意机构官网等需要提升光标交互仪式感的场景。

GSAP滚动驱动步行动画,适用于作品集个性展示或互动叙事网站等需要表现人物动态的场景

步行者

GSAP滚动驱动步行动画,适用于作品集个性展示或互动叙事网站等需要表现人物动态的场景

这是一款基于滚动触发的步行动画效果,采用GSAP ScrollTrigger技术驱动逐帧动画,将传统影视 walk cycle 原理移植到网页滚动交互中,适用于作品集个性展示、角色介绍页面或互动...

WebGL实现点击屏幕随机长出一株漂亮小花效果

触屏生花

WebGL实现点击屏幕随机长出一株漂亮小花效果

古有“妙笔生花”,今有“触屏生花”,这是一款创意绘画交互效果,基于WebGL结合Three.js技术实现,通过点击触发花朵粒子生成,将用户操作转化为即时绽放的彩色花丛,适用于艺术创作平台、儿童教...

Three.js支持点击定位的 3D 旋转地球仪(动态坐标标记方案)

3D地图定位

Three.js支持点击定位的 3D 旋转地球仪(动态坐标标记方案)

这是一款带坐标定位的3D转动地球仪动画效果,基于Three.js技术实现,通过三维球体与动态标记点的结合,适用于企业全球业务展示、旅行轨迹可视化或实时数据监控等需要突出地理位置的交互场景。

Three.js SVG交互式三维旋转地球仪(矢量地图WebGL渲染方案)

旋转地球仪

Three.js SVG交互式三维旋转地球仪(矢量地图WebGL渲染方案)

这是一款交互式三维转动地球仪,基于Three.js+SVG+GSAP技术实现,通过将平面矢量地图动态投影到WebGL球体表面,清晰的展示国家与地区的分布,并且支持鼠标悬停展示名称,同时还支持通过...

滚动触发的WebGL火烧纸张火焰逐渐扩散过渡效果(GSAP联动方案)

燃烧扩散

滚动触发的WebGL火烧纸张火焰逐渐扩散过渡效果(GSAP联动方案)

这是一款视差火焰撕裂纸张过渡效果,基于WebGL+GSAP ScrollTrigger技术实现,通过动态燃烧的粒子动画与滚动深度精准绑定,适用于叙事型网页、产品发布会等需要戏剧性场景转换的高冲击...

2KB超轻量级SVG五色流动丝滑动态背景(纯矢量动画方案)

丝滑动态背景

2KB超轻量级SVG五色流动丝滑动态背景(纯矢量动画方案)

这是一款极简SVG五种颜色流动动画背景效果,基于纯SVG技术实现,仅2KB超轻量级,通过细腻的路径动画创造出无限循环流动的抽象动态图形,适用于登陆页背景、仪表盘界面等需要轻量化动态装饰的场景。

Canvas超轻量丝滑线条光标跟随动画(3KB纯JS实现)

丝带光标

Canvas超轻量丝滑线条光标跟随动画(3KB纯JS实现)

​这是一款令人愉悦的卷曲光标跟随效果,基于Canvas+原生JS实现,超轻量级,仅3KB大小,通过流畅的弹簧物理动画让光标像丝带般优雅扭动,适用于个人作品集、创意机构官网等需要增添趣味交互细节的场景。

WebGL液态汽油花遮罩内容揭示效果,挥舞鼠标散开油渍液体关键内容逐渐显示

液态遮罩

WebGL液态汽油花遮罩内容揭示效果,挥舞鼠标散开油渍液体关键内容逐渐显示

这是一款液态内容揭示效果,基于WebGL技术实现,通过鼠标移动散开动态的液体遮罩,平滑地展示隐藏内容,适用于高端产品展示、创意网站开场等需要吸引用户注意力的场景。

CSS三款邮票锯齿压痕边框效果

邮票边框

CSS三款邮票锯齿压痕边框效果

这是一款邮票锯齿压痕边框效果,仅用CSS技术实现,通过边框和阴影模拟纸张被撕下的锯齿边缘,适用于复古设计、电子贺卡或纪念品展示场景。