基于Three.js + WebGL实现的 3D 全息镭射折射卡片轮播

钻石画廊

基于Three.js + WebGL实现的 3D 全息镭射折射卡片轮播

这是一款全息镭射钻石画廊轮播,基于 Three.js 与 WebGL 技术实现。通过多切面折射着色器与实时地面镜像反射,让每一张卡片在旋转流转中折射出镭射渐变光泽,再叠加泛光辉光与边缘色差偏移,...

基于Three.js + WebGL实现的 3D 发光粒子有机生命体

数字生命体

基于Three.js + WebGL实现的 3D 发光粒子有机生命体

​这是一款深海流体感3D粒子生命体视觉效果,基于 Three.js 与 WebGL 技术实现。通过动态点阵网格模拟出如游弋生物般优雅波动的形态,在起伏的网格空间中平滑翻涌。这种将数理结构与自然生...

基于React+Motion实现的 3D 倾斜堆叠轮播图组件

卡片堆叠轮播

基于React+Motion实现的 3D 倾斜堆叠轮播图组件

这是一款3D视角倾斜堆叠带导航状态的卡片轮播组件,基于 React 与 Motion (Framer Motion) 技术实现。两侧卡片以特定的角度倾斜并错落堆叠,切换时伴随流畅的 3D 空间位...

基于CSS 3D实现的多列纵向无缝滚动画廊组件

纵向自动滚动

基于CSS 3D实现的多列纵向无缝滚动画廊组件

这是一款具有空间透视感的纵向自动滚动图片墙效果,基于 CSS 3D Transform 与 @keyframes 动画技术实现。多列图片按不同方向(向上/向下)交错平滑循环滚动,结合倾斜视角与边...

基于CSS 3D空间转换实现的高级感环形卡片画廊轮播组件

3D轮播

基于CSS 3D空间转换实现的高级感环形卡片画廊轮播组件

这是一款3D立体封面流(Cover-Flow)环形轮播组件,基于CSS 3D视距与动态转换技术实现,它通过将卡片在三维空间内按圆弧轨迹错落堆叠,结合沉浸式暗黑美学与渐变质感,能赋予页面极具艺术张...

创意前端WebGL:基于Three.js与L-System的3D生物发光树过程化生成特效

3D发光树

创意前端WebGL:基于Three.js与L-System的3D生物发光树过程化生成特效

这是一款3D生物发光树交互效果,基于JavaScript + Three.js + L-System(分形算法)技术实现,它利用数学规则在网页端纯代码实时生成自然逼真的三维植物分支,并支持流向可...

WebGL创意交互:基于Three.js与GLSL着色器的3D粒子黑洞演化特效

粒子黑洞

WebGL创意交互:基于Three.js与GLSL着色器的3D粒子黑洞演化特效

这是一款3D交互式黑洞奇点演化效果,基于JavaScript + Three.js + GLSL着色器 + GSAP技术实现,它细腻地模拟了宇宙物质从平稳吸积盘到湍流爆发、再到相对论性引力坍缩的...

HTML/JS趣味爱心眼神跟随鼠标交互特效 | 创意微拟物网页动效

爱心眼神跟随

HTML/JS趣味爱心眼神跟随鼠标交互特效 | 创意微拟物网页动效

这是一款趣味爱心眼神跟随效果,基于HTML+CSS+JavaScript技术实现,画面中央的拟物风爱心拥有一双灵动的眼睛,能够实时追踪鼠标指针的移动,并根据鼠标的远近距离产生自然的呼吸起伏与光晕...

Three.js 3D粒子涡旋星系交互动画 | 沉浸式WebGL星空背景特效

星云动画

Three.js 3D粒子涡旋星系交互动画 | 沉浸式WebGL星空背景特效

这是一款3D粒子涡旋星系效果,基于Three.js与WebGL粒子系统(Points)技术实现。它在三维空间中汇聚了数万个独立发光的微小粒子,逼真地重构出旋转的涡旋星系与色彩斑斓的星云背景。用户...

CSS 自定义 3D 霓虹发光科技感文件夹悬停交互动画效果

科技感文件夹

CSS 自定义 3D 霓虹发光科技感文件夹悬停交互动画效果

这是一款霓虹科技感文件夹卡片效果,基于Tailwind CSS技术实现。在默认状态下,它呈现一个内敛且带有青色荧光呼吸质感的文件夹;一旦鼠标悬停,多张带有霓虹边框的“虚拟数据文件”会伴随着平滑的...

Three.js 3D霓虹流体波浪网页背景交互效果 | WebGL GLSL着色器特效

流体波浪

Three.js 3D霓虹流体波浪网页背景交互效果 | WebGL GLSL着色器特效

这是一款3D霓虹流体波浪效果,基于Three.js与WebGL GLSL着色器技术实现。它将深邃的暗色背景与跃动的霓虹光束有机结合,光带会随着鼠标的划过产生灵动、自然的流体形变与波动反馈。从项目...

Three.js 3D着色器流光卡片:基于GLSL与VanillaTilt的悬停倾斜特效

3D卡片特效

Three.js 3D着色器流光卡片:基于GLSL与VanillaTilt的悬停倾斜特效

这是一款3D着色器环形卡片效果,基于JavaScript+Three.js+GLSL+VanillaTilt.js技术实现。它将全方位的鼠标悬停立体倾斜与底层的动态着色器光圈融为一体,当光标移入...