支持响应式布局的 GSAP 音乐作品集交互式列表(带图片悬浮 + 闲置动画),

交互列表

支持响应式布局的 GSAP 音乐作品集交互式列表(带图片悬浮 + 闲置动画),

这是一款适配音乐场景的交互式表格组件,基于GSAP动画库实现,重构了 HTML 的 ui 表格,加入了列表项的悬停与闲置状态动画效果,关键是支持响应式布局。表格里清晰罗列着音乐人、作品名等信息,...

纯原生 JavaScrip 视差轮播图文轮播组件,轻量高效,视觉惊艳!

视差轮播

纯原生 JavaScrip 视差轮播图文轮播组件,轻量高效,视觉惊艳!

这是一款无第三方库的原生视差轮播效果,基于原生 JavaScript 技术实现,通过层叠元素和滚动位移模拟出深度感十足的视差动画,视觉层次分明,交互流畅自然,既支持自动轮播有支持通过底部以及左右...

彩色弹球循环跳跃小洞加载动画效果(CSS+SVG),让等待变得有趣!

小球穿洞

彩色弹球循环跳跃小洞加载动画效果(CSS+SVG),让等待变得有趣!

这是一款弹跳彩球穿孔跳跃加载动画效果,基于CSS+SVG技术实现,通过巧妙的阴影和渐变营造出立体感十足的3D视觉效果,多个彩色小球在多个小洞中循环跳跃(还借助 SVG 剪切路径处理了洞口的细节,...

CSS 滤镜+ Canvas 以全球变暖为主题实现震撼的冷暖场景切换效果,两张图片、两个世界!!!

场景切换

CSS 滤镜+ Canvas 以全球变暖为主题实现震撼的冷暖场景切换效果,两张图片、两个世界!!!

这是一款聚焦全球变暖的场景切换效果,基于 CSS 滤镜+ Canvas 技术实现,它把左侧冰雪、云海交织的清凉水域景观,仅通过滤镜处理就转化成了右侧熔岩遍布、黑暗笼罩的末日荒原,用强烈的视觉对比...

让网页也下雪(CSS+JS):一键生成真实感积雪边框!

积雪网页

让网页也下雪(CSS+JS):一键生成真实感积雪边框!

这是一款冬季主题的“积雪层”视觉效果,基于CSS实现,通过为任意元素添加“collider”类,即可在顶部自动生成自然的积雪边缘。画面中卡片顶部覆盖着不规则的雪堆,配合飘落的雪花背景,营造出浓厚...

用户资料卡片组件,支持明暗模式与丝滑的悬停详情展示动画

资料卡片

用户资料卡片组件,支持明暗模式与丝滑的悬停详情展示动画

这是一款支持明暗模式切换的动画用户卡片组件,基于 CSS 过渡动画技术实现,支持悬停卡片展示用户详细信息,并提供关注及粉丝数等功能按钮,此外还支持轻盈浅色与沉稳深色两种样式的平滑切换,卡片既能清...

CSS 自动 logo 轮播(悬停暂停)效果,让品牌展示更自然

品牌轮播

CSS 自动 logo 轮播(悬停暂停)效果,让品牌展示更自然

这是一款横向自动滚动的Logo展示条效果,基于CSS实现,多个品牌标识(LOGO)在页面中持续平滑移动,滚动边缘有明显的锐化效果,鼠标悬停时滚动自动暂停,提升用户浏览体验。设计简洁大方,适合用于...

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)技术实现,用环形线条与细密光点模拟出穿梭黑洞的沉浸式视觉感,通过层层递进...