跑马灯菜单
基于纯 CSS 实现的悬停无缝跑马灯菜单效果这是一款悬停展开的无限滚动菜单组件,基于 纯 CSS(@keyframes 与 :hover 伪类) 技术实现。默认状态下呈现极简列表,当鼠标悬停时,菜单项会平滑展出带图文混排的无缝滚动跑马灯。...
故障导航菜单
基于GSAP的复古赛博朋克故障风(Glitch)导航菜单这是一款复古故障风导航菜单效果,基于CSS+GSAP动画库技术实现,通过高频随机的文本撕裂、横向位移错位以及色彩重叠动效,生动还原了早期电子屏幕的信号抖动感,能瞬间拉满页面的科幻与前卫属性,适用...
科技感文件夹
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技术实现。它将全方位的鼠标悬停立体倾斜与底层的动态着色器光圈融为一体,当光标移入...
个性文件夹
纯 CSS 磨砂玻璃风文件夹悬停升起特效这是一款质感细腻的磨砂玻璃风(Glassmorphic)文件夹交互特效,基于 Tailwind CSS 与高级渐变背景技术实现。该设计巧妙运用了半透明背景模糊(backdrop-blur)与内阴...
3D悬停视差卡片
纯CSS鼠标悬停3D视差卡片特效这是一个完全基于纯CSS(无需JavaScript)实现的3D鼠标悬停视差卡片效果。利用CSS的 :hover 伪类配合 transform 与 perspective 属性,当鼠标指针在卡片上...
logo 品牌墙
CSS 无限跑马灯效果 | 悬停变速多行 logo 滚动组件这是一款纯 CSS 实现的无限跑马灯效果,支持多行独立循环滚动,鼠标悬停时可智能控制滚动速度,无需 JavaScript 即可流畅运行,性能优异,适用于合作伙伴 logo 墙、品牌展示、客户案例...
GSAP 悬停交互
GSAP 实现的图片卡片随鼠标移动产生位移,创意网页展示必备这是一款横向滚动卡片悬停交互效果,基于 GSAP.js 动画库实现,鼠标悬停卡片时卡片滚动位移丝滑无卡顿,并且标题自动高亮变色,交互反馈清晰直观,适用于个人作品集、摄影画廊、品牌官网等需要横向内...
趣味倾倒音量滑块
可交互悬停式音量滑块动效组件(CSS+JS)这是一款基于 CSS+JavaScript 实现的悬停式音量控制滑块效果。它通过鼠标悬停即可调整音量大小,滑块会随数值变化动态倾斜、填充进度,搭配霓虹质感的发光效果,交互反馈清晰直观,适用于音视...
手绘下划线
纯 SVG + CSS 实现的 9 种不同风格手绘下划线悬停动画效果这是一款手绘下划线悬停动画效果,基于CSS动画+SVG Symbols+极简JavaScript技术实现。鼠标悬停导航文字时,会出现手绘风格的下划线,带有轻微的不规则感和动态描绘过程,每次显示还...
切角分割图库
纯 CSS 可展开式图片画廊切角效果这是一款可展开式图片画廊效果,基于CSS Grid和corner-shape:notch切角技术实现。默认状态下4张建筑图片均匀排列,当鼠标悬停某张图片时,它会立即展开占据更大空间,同时其他图片...