钻石画廊
基于Three.js + WebGL实现的 3D 全息镭射折射卡片轮播这是一款全息镭射钻石画廊轮播,基于 Three.js 与 WebGL 技术实现。通过多切面折射着色器与实时地面镜像反射,让每一张卡片在旋转流转中折射出镭射渐变光泽,再叠加泛光辉光与边缘色差偏移,...
卡片堆叠轮播
基于React+Motion实现的 3D 倾斜堆叠轮播图组件这是一款3D视角倾斜堆叠带导航状态的卡片轮播组件,基于 React 与 Motion (Framer Motion) 技术实现。两侧卡片以特定的角度倾斜并错落堆叠,切换时伴随流畅的 3D 空间位...
活页纸打孔
基于CSS Mask遮罩实现的的逼真打孔活页纸特效这是一款拟真活页纸打孔卡片效果,基于 CSS mask-image 与 mask-composite 技术实现。无需额外的图片素材或复杂的 DOM 结构,直接利用遮罩合成在卡片边缘切出自然的圆形...
毛玻璃UI效果
基于纯CSS OKLCH实现的动态玻璃拟态主题切换效果这是一款动态弥散光感玻璃拟态卡片效果,基于 CSS变量、oklch() 相对颜色与 CSS 三角函数技术实现。无需一行 JS,只需修改单个色相数值即可通过数学运算自动演算出和谐的三配色体系,配合...
3D轮播
基于CSS 3D空间转换实现的高级感环形卡片画廊轮播组件这是一款3D立体封面流(Cover-Flow)环形轮播组件,基于CSS 3D视距与动态转换技术实现,它通过将卡片在三维空间内按圆弧轨迹错落堆叠,结合沉浸式暗黑美学与渐变质感,能赋予页面极具艺术张...
路径动画
GSAP ScrollTrigger 视差滚动与 SVG 路径绘图特效 | 创意滚动交互效果,适合时间轴、项目展示等场景这是一款滚动视差代码展台效果,基于GSAP (ScrollTrigger / SplitText) 与 SVG 路径描边技术实现。当用户向下滚动页面时,前台的毛玻璃卡片与背景绚丽的 SVG 渐变...
科技感文件夹
CSS 自定义 3D 霓虹发光科技感文件夹悬停交互动画效果这是一款霓虹科技感文件夹卡片效果,基于Tailwind CSS技术实现。在默认状态下,它呈现一个内敛且带有青色荧光呼吸质感的文件夹;一旦鼠标悬停,多张带有霓虹边框的“虚拟数据文件”会伴随着平滑的...
3D卡片特效
Three.js 3D着色器流光卡片:基于GLSL与VanillaTilt的悬停倾斜特效这是一款3D着色器环形卡片效果,基于JavaScript+Three.js+GLSL+VanillaTilt.js技术实现。它将全方位的鼠标悬停立体倾斜与底层的动态着色器光圈融为一体,当光标移入...
悬停倾斜卡片
CSS 3D卡片悬停倾斜特效:基于Vanilla-Tilt的交互式视差设计这是一款3D交互卡片视差倾斜效果,基于CSS 3D转换与vanilla-tilt.js技术实现。当鼠标在卡片上悬停移动时,整个卡片会随光标方向进行平滑的三维空间倾斜,内部的图片、文字和按钮等元素...
沃达仕
多场景通用 Spring Boot 后台管理系统模板这款模板是一套基于 Bootstrap 5 响应式前端框架打造的现代化后台管理系统,专为各类 Web 应用的管理端而设计,适用范围覆盖管理后台、项目管理、CRM、CMS 以及电商后台等多种业务场...
个性文件夹
纯 CSS 磨砂玻璃风文件夹悬停升起特效这是一款质感细腻的磨砂玻璃风(Glassmorphic)文件夹交互特效,基于 Tailwind CSS 与高级渐变背景技术实现。该设计巧妙运用了半透明背景模糊(backdrop-blur)与内阴...
3D悬停视差卡片
纯CSS鼠标悬停3D视差卡片特效这是一个完全基于纯CSS(无需JavaScript)实现的3D鼠标悬停视差卡片效果。利用CSS的 :hover 伪类配合 transform 与 perspective 属性,当鼠标指针在卡片上...