钻石画廊
基于Three.js + WebGL实现的 3D 全息镭射折射卡片轮播这是一款全息镭射钻石画廊轮播,基于 Three.js 与 WebGL 技术实现。通过多切面折射着色器与实时地面镜像反射,让每一张卡片在旋转流转中折射出镭射渐变光泽,再叠加泛光辉光与边缘色差偏移,...
数字生命体
基于Three.js + WebGL实现的 3D 发光粒子有机生命体这是一款深海流体感3D粒子生命体视觉效果,基于 Three.js 与 WebGL 技术实现。通过动态点阵网格模拟出如游弋生物般优雅波动的形态,在起伏的网格空间中平滑翻涌。这种将数理结构与自然生...
卡片堆叠轮播
基于React+Motion实现的 3D 倾斜堆叠轮播图组件这是一款3D视角倾斜堆叠带导航状态的卡片轮播组件,基于 React 与 Motion (Framer Motion) 技术实现。两侧卡片以特定的角度倾斜并错落堆叠,切换时伴随流畅的 3D 空间位...
纵向自动滚动
基于CSS 3D实现的多列纵向无缝滚动画廊组件这是一款具有空间透视感的纵向自动滚动图片墙效果,基于 CSS 3D Transform 与 @keyframes 动画技术实现。多列图片按不同方向(向上/向下)交错平滑循环滚动,结合倾斜视角与边...
3D轮播
基于CSS 3D空间转换实现的高级感环形卡片画廊轮播组件这是一款3D立体封面流(Cover-Flow)环形轮播组件,基于CSS 3D视距与动态转换技术实现,它通过将卡片在三维空间内按圆弧轨迹错落堆叠,结合沉浸式暗黑美学与渐变质感,能赋予页面极具艺术张...
3D发光树
创意前端WebGL:基于Three.js与L-System的3D生物发光树过程化生成特效这是一款3D生物发光树交互效果,基于JavaScript + Three.js + L-System(分形算法)技术实现,它利用数学规则在网页端纯代码实时生成自然逼真的三维植物分支,并支持流向可...
粒子黑洞
WebGL创意交互:基于Three.js与GLSL着色器的3D粒子黑洞演化特效这是一款3D交互式黑洞奇点演化效果,基于JavaScript + Three.js + GLSL着色器 + GSAP技术实现,它细腻地模拟了宇宙物质从平稳吸积盘到湍流爆发、再到相对论性引力坍缩的...
爱心眼神跟随
HTML/JS趣味爱心眼神跟随鼠标交互特效 | 创意微拟物网页动效这是一款趣味爱心眼神跟随效果,基于HTML+CSS+JavaScript技术实现,画面中央的拟物风爱心拥有一双灵动的眼睛,能够实时追踪鼠标指针的移动,并根据鼠标的远近距离产生自然的呼吸起伏与光晕...
星云动画
Three.js 3D粒子涡旋星系交互动画 | 沉浸式WebGL星空背景特效这是一款3D粒子涡旋星系效果,基于Three.js与WebGL粒子系统(Points)技术实现。它在三维空间中汇聚了数万个独立发光的微小粒子,逼真地重构出旋转的涡旋星系与色彩斑斓的星云背景。用户...
科技感文件夹
CSS 自定义 3D 霓虹发光科技感文件夹悬停交互动画效果这是一款霓虹科技感文件夹卡片效果,基于Tailwind CSS技术实现。在默认状态下,它呈现一个内敛且带有青色荧光呼吸质感的文件夹;一旦鼠标悬停,多张带有霓虹边框的“虚拟数据文件”会伴随着平滑的...
流体波浪
Three.js 3D霓虹流体波浪网页背景交互效果 | WebGL GLSL着色器特效这是一款3D霓虹流体波浪效果,基于Three.js与WebGL GLSL着色器技术实现。它将深邃的暗色背景与跃动的霓虹光束有机结合,光带会随着鼠标的划过产生灵动、自然的流体形变与波动反馈。从项目...
3D卡片特效
Three.js 3D着色器流光卡片:基于GLSL与VanillaTilt的悬停倾斜特效这是一款3D着色器环形卡片效果,基于JavaScript+Three.js+GLSL+VanillaTilt.js技术实现。它将全方位的鼠标悬停立体倾斜与底层的动态着色器光圈融为一体,当光标移入...