资料卡片
用户资料卡片组件，支持明暗模式与丝滑的悬停详情展示动画这是一款支持明暗模式切换的动画用户卡片组件，基于 CSS 过渡动画技术实现，支持悬停卡片展示用户详细信息，并提供关注及粉丝数等功能按钮，此外还支持轻盈浅色与沉稳深色两种样式的平滑切换，卡片既能清...
品牌轮播
CSS 自动 logo 轮播（悬停暂停）效果，让品牌展示更自然这是一款横向自动滚动的Logo展示条效果，基于CSS实现，多个品牌标识（LOGO）在页面中持续平滑移动，滚动边缘有明显的锐化效果，鼠标悬停时滚动自动暂停，提升用户浏览体验。设计简洁大方，适合用于...
布局重排
CSS+GSAP 驱动的网格图片丝滑重排动画效果，以更优雅的方式切换布局这是一款网格布局重排动画效果，基于CSS、GSAP和Flip技术实现，当页面布局发生变化时（如切换大图/小图模式），图片能流畅地进行位置与尺寸的动态调整，避免生硬跳动。画面中古典画作在网格间平滑...
跳动下划线
自定义 SVG 上下跳跃动画“调皮”下划线效果这是一款自定义下划线动画效果，基于SVG与CSS实现，通过动态线条勾勒出文字下方的强调线，能给文字里的重点内容加上灵动的动态下划线（标记文字被一条绿色弓形波浪线轻轻托起，仿佛在传递一种克制却真挚...
首屏3D动画
用 WebGL 打造的沉浸式折射晶体玻璃态动画 Hero 首屏布局这是一款 WebGL 折射晶体玻璃态 Hero 首屏区域 3D 动画效果，基于 WebGL+GLSL 着色器技术实现，通过光线追踪渲染出晶莹剔透的折射晶体场景，搭配玻璃拟态风格的UI元素，营造出...
火焰螺旋
WebGL 交互式 GLSL 火焰螺旋动效，用鼠标点燃的火焰风暴！这是一款全屏火焰螺旋动画效果，基于WebGL与GLSL着色器技术实现，通过程序化方式生成的动态光效呈现出极具视觉冲击力的火焰漩涡。画面中色彩不断流转，线条如火焰般舞动，中心向外辐射出强烈的能量感...
虫洞动画
Canvas 黑洞隧道动画效果：穿越时空的视觉奇观，用代码打造的数字虫洞！这是一款视觉震撼的 Canvas 黑洞隧道（“虫洞”）动画效果，基于 Canvas + 缓动工具（easingUtils）技术实现，用环形线条与细密光点模拟出穿梭黑洞的沉浸式视觉感，通过层层递进...
404页面
带“叹气”表情动画的404创意 HTML 页面布局（CSS+SVG）：让错误页面也有人情味这是一款创意404错误页面动画效果，基于CSS+SVG技术实现，把数字 “4”“0”“4” 拼成了委屈的人脸样式，通过简单的线条变化呈现出沮丧、无奈的表情动态。它用幽默的方式化解用户访问失败时...
刻度调控
支持四种吸附功能的数值刻度滚动调节器（CSS+JS），精准调节的交互新体验这是一款数字滑动选择器效果，基于CSS+JS技术实现，通过可拖拽的刻度条配合数值自动吸附功能，让用户直观地调节并查看对应数值。它支持多种吸附模式——仅吸附到关键值、吸附到常见刻度、仅吸附到主刻度...
滚动切换图片
CSS 滚动驱动多阶段照片比较组件：自动适配层的分阶段内容展示工具，让图像叙事更智能流畅这是一款基于 CSS 滚动驱动多阶段图像比较效果，基于 CSS scroll-timeline+animation-range+JS 技术实现 —— 它靠滚动位置来驱动多阶段的图像对比，利用图片...
无线轮播卡片
GSAP 无限滚动吸附卡片组件：丝滑循环的互动内容轮播，打造丝滑流畅的交互体验这是一款 GSAP 无限滚动吸附卡片效果，基于 GSAP+ScrollTrigger+CSS 技术实现 ，支持平滑拖拽、自动吸附与循环播放。用户可以自由滑动浏览卡片，系统会智能地将内容无缝衔接，...
滚动时间轴
GSAP滚动弯曲轨迹时间轴、事件线图文展示组件这是一款滚动弯曲事件轴轨迹图文展示布局效果，基于 Scroll-Animation API+ScrollTrigger+CSS 技术实现 —— 能让页面图文区块内容随着滚动呈现分层入场的解构式动...