CSS+GSAP 驱动的网格图片丝滑重排动画效果,以更优雅的方式切换布局

布局重排

CSS+GSAP 驱动的网格图片丝滑重排动画效果,以更优雅的方式切换布局

这是一款网格布局重排动画效果,基于CSS、GSAP和Flip技术实现,当页面布局发生变化时(如切换大图/小图模式),图片能流畅地进行位置与尺寸的动态调整,避免生硬跳动。画面中古典画作在网格间平滑...

自定义 SVG 上下跳跃动画“调皮”下划线效果

跳动下划线

自定义 SVG 上下跳跃动画“调皮”下划线效果

这是一款自定义下划线动画效果,基于SVG与CSS实现,通过动态线条勾勒出文字下方的强调线,能给文字里的重点内容加上灵动的动态下划线(标记文字被一条绿色弓形波浪线轻轻托起,仿佛在传递一种克制却真挚...

用 WebGL 打造的沉浸式折射晶体玻璃态动画 Hero 首屏布局

首屏3D动画

用 WebGL 打造的沉浸式折射晶体玻璃态动画 Hero 首屏布局

这是一款 WebGL 折射晶体玻璃态 Hero 首屏区域 3D 动画效果,基于 WebGL+GLSL 着色器技术实现,通过光线追踪渲染出晶莹剔透的折射晶体场景,搭配玻璃拟态风格的UI元素,营造出...

WebGL 交互式 GLSL 火焰螺旋动效,用鼠标点燃的火焰风暴!

火焰螺旋

WebGL 交互式 GLSL 火焰螺旋动效,用鼠标点燃的火焰风暴!

这是一款全屏火焰螺旋动画效果,基于WebGL与GLSL着色器技术实现,通过程序化方式生成的动态光效呈现出极具视觉冲击力的火焰漩涡。画面中色彩不断流转,线条如火焰般舞动,中心向外辐射出强烈的能量感...

Canvas 黑洞隧道动画效果:穿越时空的视觉奇观,用代码打造的数字虫洞!

虫洞动画

Canvas 黑洞隧道动画效果:穿越时空的视觉奇观,用代码打造的数字虫洞!

这是一款视觉震撼的 Canvas 黑洞隧道(“虫洞”)动画效果,基于 Canvas + 缓动工具(easingUtils)技术实现,用环形线条与细密光点模拟出穿梭黑洞的沉浸式视觉感,通过层层递进...

带“叹气”表情动画的404创意 HTML 页面布局(CSS+SVG):让错误页面也有人情味

404页面

带“叹气”表情动画的404创意 HTML 页面布局(CSS+SVG):让错误页面也有人情味

​这是一款创意404错误页面动画效果,基于CSS+SVG技术实现,把数字 “4”“0”“4” 拼成了委屈的人脸样式,通过简单的线条变化呈现出沮丧、无奈的表情动态。它用幽默的方式化解用户访问失败时...

支持四种吸附功能的数值刻度滚动调节器(CSS+JS),精准调节的交互新体验

刻度调控

支持四种吸附功能的数值刻度滚动调节器(CSS+JS),精准调节的交互新体验

这是一款数字滑动选择器效果,基于CSS+JS技术实现,通过可拖拽的刻度条配合数值自动吸附功能,让用户直观地调节并查看对应数值。它支持多种吸附模式——仅吸附到关键值、吸附到所有刻度、仅吸附到主刻度...

CSS 滚动驱动多阶段照片比较组件:自动适配层的分阶段内容展示工具,让图像叙事更智能流畅

滚动切换图片

CSS 滚动驱动多阶段照片比较组件:自动适配层的分阶段内容展示工具,让图像叙事更智能流畅

这是一款基于 CSS 滚动驱动多阶段图像比较效果,基于 CSS scroll-timeline+animation-range+JS 技术实现 —— 它靠滚动位置来驱动多阶段的图像对比,利用图片...

GSAP 无限滚动吸附卡片组件:丝滑循环的互动内容轮播,打造丝滑流畅的交互体验

无线轮播卡片

GSAP 无限滚动吸附卡片组件:丝滑循环的互动内容轮播,打造丝滑流畅的交互体验

这是一款 GSAP 无限滚动吸附卡片效果,基于 GSAP+ScrollTrigger+CSS 技术实现 ,支持平滑拖拽、自动吸附与循环播放。用户可以自由滑动浏览卡片,系统会智能地将内容无缝衔接,...

GSAP滚动弯曲轨迹时间轴、事件线图文展示组件

滚动时间轴

GSAP滚动弯曲轨迹时间轴、事件线图文展示组件

这是一款滚动弯曲事件轴轨迹图文展示布局效果,基于 Scroll-Animation API+ScrollTrigger+CSS 技术实现 —— 能让页面图文区块内容随着滚动呈现分层入场的解构式动...

GSAP 动画圆环形 Logo 图片自动轮播:优雅响应式品牌展示组件

LOGO轮播

GSAP 动画圆环形 Logo 图片自动轮播:优雅响应式品牌展示组件

这是一款基于GSAP实现的环形LOGO品牌图片自动轮播组件,通过流畅的动画让多个品牌Logo围绕中心旋转展示,中心位置可放置自己的品牌LOGO或者文字。整体设计简洁优雅,响应式布局自动适配不同设...

刮冰磨砂窗、“擦除”冰层互动效果:节日主题或刮奖小游戏趣味交互组件

擦除动画

刮冰磨砂窗、“擦除”冰层互动效果:节日主题或刮奖小游戏趣味交互组件

这是一款“刮冰看图”互动效果,基于Canvas+CSS实现,模拟了在结霜的玻璃上刮开冰雪、露出隐藏画面的趣味体验。用户通过鼠标或触控拖动,可以“擦除”冰层,逐步揭示下方可爱的节日插画,兼具视觉惊...