布局重排
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 技术实现 —— 能让页面图文区块内容随着滚动呈现分层入场的解构式动...
LOGO轮播
GSAP 动画圆环形 Logo 图片自动轮播:优雅响应式品牌展示组件这是一款基于GSAP实现的环形LOGO品牌图片自动轮播组件,通过流畅的动画让多个品牌Logo围绕中心旋转展示,中心位置可放置自己的品牌LOGO或者文字。整体设计简洁优雅,响应式布局自动适配不同设...
擦除动画
刮冰磨砂窗、“擦除”冰层互动效果:节日主题或刮奖小游戏趣味交互组件这是一款“刮冰看图”互动效果,基于Canvas+CSS实现,模拟了在结霜的玻璃上刮开冰雪、露出隐藏画面的趣味体验。用户通过鼠标或触控拖动,可以“擦除”冰层,逐步揭示下方可爱的节日插画,兼具视觉惊...