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

钻石画廊

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

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

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

卡片堆叠轮播

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

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

基于CSS Mask遮罩实现的的逼真打孔活页纸特效

活页纸打孔

基于CSS Mask遮罩实现的的逼真打孔活页纸特效

这是一款拟真活页纸打孔卡片效果,基于 CSS mask-image 与 mask-composite 技术实现。无需额外的图片素材或复杂的 DOM 结构,直接利用遮罩合成在卡片边缘切出自然的圆形...

基于纯CSS OKLCH实现的动态玻璃拟态主题切换效果

毛玻璃UI效果

基于纯CSS OKLCH实现的动态玻璃拟态主题切换效果

这是一款动态弥散光感玻璃拟态卡片效果,基于 CSS变量、oklch() 相对颜色与 CSS 三角函数技术实现。无需一行 JS,只需修改单个色相数值即可通过数学运算自动演算出和谐的三配色体系,配合...

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

3D轮播

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

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

GSAP ScrollTrigger 视差滚动与 SVG 路径绘图特效 | 创意滚动交互效果,适合时间轴、项目展示等场景

路径动画

GSAP ScrollTrigger 视差滚动与 SVG 路径绘图特效 | 创意滚动交互效果,适合时间轴、项目展示等场景

这是一款滚动视差代码展台效果,基于GSAP (ScrollTrigger / SplitText) 与 SVG 路径描边技术实现。当用户向下滚动页面时,前台的毛玻璃卡片与背景绚丽的 SVG 渐变...

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

科技感文件夹

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

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

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

3D卡片特效

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

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

CSS 3D卡片悬停倾斜特效:基于Vanilla-Tilt的交互式视差设计

悬停倾斜卡片

CSS 3D卡片悬停倾斜特效:基于Vanilla-Tilt的交互式视差设计

这是一款3D交互卡片视差倾斜效果,基于CSS 3D转换与vanilla-tilt.js技术实现。当鼠标在卡片上悬停移动时,整个卡片会随光标方向进行平滑的三维空间倾斜,内部的图片、文字和按钮等元素...

多场景通用 Spring Boot 后台管理系统模板

沃达仕

多场景通用 Spring Boot 后台管理系统模板

这款模板是一套基于 Bootstrap 5 响应式前端框架打造的现代化后台管理系统,专为各类 Web 应用的管理端而设计,适用范围覆盖管理后台、项目管理、CRM、CMS 以及电商后台等多种业务场...

纯 CSS 磨砂玻璃风文件夹悬停升起特效

个性文件夹

纯 CSS 磨砂玻璃风文件夹悬停升起特效

这是一款质感细腻的磨砂玻璃风(Glassmorphic)文件夹交互特效,基于 Tailwind CSS 与高级渐变背景技术实现。该设计巧妙运用了半透明背景模糊(backdrop-blur)与内阴...

纯CSS鼠标悬停3D视差卡片特效

3D悬停视差卡片

纯CSS鼠标悬停3D视差卡片特效

这是一个完全基于纯CSS(无需JavaScript)实现的3D鼠标悬停视差卡片效果。利用CSS的 :hover 伪类配合 transform 与 perspective 属性,当鼠标指针在卡片上...