场景切换
CSS 滤镜+ Canvas 以全球变暖为主题实现震撼的冷暖场景切换效果，两张图片、两个世界！！！这是一款聚焦全球变暖的场景切换效果，基于 CSS 滤镜+ Canvas 技术实现，它把左侧冰雪、云海交织的清凉水域景观，仅通过滤镜处理就转化成了右侧熔岩遍布、黑暗笼罩的末日荒原，用强烈的视觉对比...
资料卡片
用户资料卡片组件，支持明暗模式与丝滑的悬停详情展示动画这是一款支持明暗模式切换的动画用户卡片组件，基于 CSS 过渡动画技术实现，支持悬停卡片展示用户详细信息，并提供关注及粉丝数等功能按钮，此外还支持轻盈浅色与沉稳深色两种样式的平滑切换，卡片既能清...
品牌轮播
CSS 自动 logo 轮播（悬停暂停）效果，让品牌展示更自然这是一款横向自动滚动的Logo展示条效果，基于CSS实现，多个品牌标识（LOGO）在页面中持续平滑移动，滚动边缘有明显的锐化效果，鼠标悬停时滚动自动暂停，提升用户浏览体验。设计简洁大方，适合用于...
跳动下划线
自定义 SVG 上下跳跃动画“调皮”下划线效果这是一款自定义下划线动画效果，基于SVG与CSS实现，通过动态线条勾勒出文字下方的强调线，能给文字里的重点内容加上灵动的动态下划线（标记文字被一条绿色弓形波浪线轻轻托起，仿佛在传递一种克制却真挚...
首屏3D动画
用 WebGL 打造的沉浸式折射晶体玻璃态动画 Hero 首屏布局这是一款 WebGL 折射晶体玻璃态 Hero 首屏区域 3D 动画效果，基于 WebGL+GLSL 着色器技术实现，通过光线追踪渲染出晶莹剔透的折射晶体场景，搭配玻璃拟态风格的UI元素，营造出...
LOGO轮播
GSAP 动画圆环形 Logo 图片自动轮播：优雅响应式品牌展示组件这是一款基于GSAP实现的环形LOGO品牌图片自动轮播组件，通过流畅的动画让多个品牌Logo围绕中心旋转展示，中心位置可放置自己的品牌LOGO或者文字。整体设计简洁优雅，响应式布局自动适配不同设...
滑动切换
纯 CSS 滑动标签切换动画效果，适用于标签切换、选择栏以及导航等场景这是一款纯CSS实现的动画分段控件效果，通过伪元素和过渡动画打造“滑动切换”的视觉效果，点击任意选项时，选中状态会以平滑的方式横向移动，仿佛按钮在“滑入”当前位置，悬停时，阴影标记跟随鼠标移动。...
图文轮播
中心焦点放大式图文轮播组件：让重点内容自动“站C位”（CSS+JS）这是一款中心放大式生产力卡片轮播，基于 HTML、CSS以及JS 技术实现（全程未依赖第三方库），采用连续无分页的“单轨道连续滚动”形式，中间活跃卡片会自动放大突出重点，两侧还能显示两张迷你卡...
导航图标提示
CSS 导航栏图标按钮悬停提示标签效果这是一款导航图标按钮工具提示组件，基于 HTML+CSS 技术实现，它能给悬停的导航栏中的功能图标按钮搭配文字提示框，清晰展示按钮对应的功能（比如示例里的设置图标会弹出 “Settings” 提...
图片自动轮播
GSAP驱动的 3D 立体图片滚动自动轮播动画这是一款 GSAP 3D 图片滚动展示组件，基于 GSAP 动画库 + CSS 技术实现，它把图片做成带透视感的 3D 立牌样式，底部若隐若现，仿佛置身于云端，还搭配了鼠标悬停图片摆正位置微微放...
玻璃UI界面
苹果液态玻璃（Liquid Glass）UI 效果：iOS 26 标志性通透界面这是一款仿iOS 26“液态玻璃”（Liquid Glass）风格的UI视觉效果，基于现代CSS与模糊滤镜技术实现。图标和控件悬浮于背景之上，通过半透明蒙层、轻微模糊和边缘高光，营造出如玻璃般通...
流光按钮
带彩色流光边框的高端定制按钮（CSS+JS），悬停按钮微光追随交互动效这是一款使用CSS+JS实现高端定制化按钮，带有悬停流光动态交互效果，采用半透明背景、渐变边框与轻微阴影，营造出晶莹剔透的玻璃质感，在悬停按钮时按钮微微凸起，边框带有彩色光晕流动效果。按钮文字清...