全屏轮播
HTML毛玻璃图片轮播：backdrop-filter 磨砂面板+电影级切换效果这是一款毛玻璃旅游景点图片轮播效果，基于原生 HTML+CSS+JavaScript 实现，不依赖任何框架。它最讲究的一点是：毛玻璃面板独立于滑动层，切换时面板本身纹丝不动，只有背后的照片横向推...
肥皂泡动画
纯 CSS 肥皂泡特效：渐变干涉色+多层高光的写实气泡这是一款写实肥皂泡效果，基于纯 CSS 实现，整个页面只有两个空标签，没有图片、没有 JS。泡泡的通透感全靠渐变叠加：一层径向渐变把中心掏空，两层方向相反的彩虹线性渐变被挤到上下边缘，再用 sc...
黑洞特效
Three.js 黑洞引力透镜特效：GLSL 实时光线弯曲与吸积盘渲染这是一款黑洞引力透镜效果，基于 Three.js + GLSL 着色器实时渲染，全屏画面里没有一张贴图，全部由片元着色器逐像素算出来。它的核心是光线弯曲：屏幕上每个像素都发一条光线，在黑洞引力场...
拟物化UI
深色拟物控制面板 UI：可拖拽旋钮+推子的纯 CSS 质感界面这是一款深色拟物控制面板 UI效果，基于 HTML+CSS+JavaScript 实现，纯 CSS 造型、不依赖任何图片和第三方库。整块面板走的是"碳纤维+金属旋钮"的路子：大号旋钮可以按住拖动...
横向滚动轮播
GSAP 横向滚动 3D 卡片轮播：Coverflow 立体展示区这是一款横向滚动 3D 卡片轮播效果，基于 HTML+CSS+JavaScript（GSAP + ScrollTrigger）实现。玩法是"用竖向滚轮驱动横向浏览"：页面滚到该区块时把它钉在屏...
脑图
GSAP 节点连线信息图（脑图）动画效果：SVG 路径描边+图标浮动这是一款信息图节点连线动效，基于 HTML+CSS+SVG+JavaScript（GSAP + ScrollTrigger）实现。画面结构很直白：中心一枚大脑图标作为核心，左右各三个圆形图标节点...
动态海浪背景
冲浪天气预报网页模板：SVG 动态海浪+潮汐图表+七天预报这是一款冲浪状况报告页效果，基于 HTML+CSS+SVG+JavaScript（GSAP ScrollTrigger）实现。首屏的海浪不是画好的图片，而是用多组正弦波叠加实时算出来的路径：振幅...
移动端菜单
12 种移动端菜单交互效果合集（HTML+CSS+JS 可交互演示）这是一款移动端菜单交互合集效果，基于原生 HTML+CSS+JavaScript 实现，把手机上常见的 12 种导航形态集中做成了可以真实操作的样例：汉堡抽屉、侧边导航条、底部标签栏、悬浮球速拨...
滚动序列帧动画
Canvas 序列帧滚动拆解动画 - 手机零件分离产品展示特效这是一款滚动驱动的手机拆解演示效果，基于 HTML+CSS+原生 JavaScript 与 Canvas 逐帧绘制实现，不依赖任何动画库。做法是先把一段三维拆解动画导出成 220 张 WebP ...
Three.js螺旋画廊
Three.js 3D 螺旋图片无限滚动效果 - WebGL 惯性画廊特效这是一款三维螺旋图片无限滚动效果，基于 HTML+JavaScript 与 Three.js（WebGL）加自定义着色器实现。二十多张图片沿螺旋轨迹环绕成一条上升的"胶片带"，滚轮或触屏上下滑动...
文字乱码动画
纯 CSS 特效合集 - 故障字/极光/玻璃拟态/乱码文字无依赖实现这是一款纯原生技术的 CSS 特效合集页，基于 HTML+CSS+原生 JavaScript 实现，不依赖任何框架或动画库。页面串起五种当下常见的视觉玩法：clip-path 切片错位配关键帧做...
整屏吸附滚动
Lenis + GSAP 全屏无限滚动视差效果 - 整屏吸附图片展示这是一款全屏图片无限循环滚动效果，基于 HTML+CSS 与 Lenis（平滑滚动 + 无限循环 + 整屏吸附）、GSAP ScrollTrigger 技术实现。三张满屏大图纵向排列，滚到底会无...