个性文件夹
纯 CSS 磨砂玻璃风文件夹悬停升起特效这是一款质感细腻的磨砂玻璃风(Glassmorphic)文件夹交互特效,基于 Tailwind CSS 与高级渐变背景技术实现。该设计巧妙运用了半透明背景模糊(backdrop-blur)与内阴...
卡片堆叠切换
GSAP实现的3D沉浸式图文切片卡片自动切换效果,营造出极强的艺术感与空间纵深感这是一个极具视觉冲击力的3D沉浸式图文卡片切换效果,基于GSAP(GreenSock Animation Platform)与CSS 3D转换技术实现。它通过独特的“中心焦点+背景模糊切片”的堆...
APP个人弹窗
React 移动端头像点击转场弹窗,个人中心旋转入场交互组件这是一款移动端头像点击触发的旋转转场个人中心弹窗交互效果,基于 React+Framer Motion 技术实现,点击头像即可唤起带顺滑旋转入场动效的个人信息面板,背景同步做模糊弱化处理,转场过...
液态气泡
Liquid Glass液态玻璃气泡效果,Three.js实现的Metaball折射交互动画这是一款液态玻璃气泡效果,基于 Three.js + WebGL + Metaball 算法技术实现,模拟真实水泡的透明质感、光线折射与表面张力——气泡之间靠近时会自然"粘连融合",拖拽可实时交...
圆弧滑块
GSAP全屏图片弧形自动滚动切换特效 | 景深模糊过渡的高端滑块组件这是一款全屏沉浸式图片切换效果,基于 GSAP + CSS 技术实现。切换时,下一张图片从背景虚化状态逐渐推近、聚焦,同时左侧大字标题跟随流畅过渡,背景色也随内容联动变换——整个过程一气呵成,有...
手机演示
手机屏360度3D旋转演示动画,纯 CSS 实现手机隐私屏幕(防窥屏)模拟效果这是一款模拟三星 Galaxy S26 Ultra 隐私屏功能的交互效果,基于 CSS ::before 和 ::after 伪元素实现。核心玩法是:鼠标靠近手机时屏幕内容清晰可见,鼠标移开后视...
实时壁纸
超写实雨滴玻璃动态壁纸生成器(WebGL+CSS)|支持日历+本地实时天气这是一款基于 WebGL + CSS Glassmorphism 技术实现的雨天玻璃模拟效果,雨滴的折射、流淌、聚合全部逼真还原,不是简单的动图,而是实时渲染的物理级视觉体验。背景支持自定义图片...
流光
纯 CSS 全息故障文字动画效果+3D漂浮流光卡片这是一款全息故障文字动画效果,基于纯CSS技术实现。标题文字带有RGB色彩分离的故障艺术风格,字母边缘会闪现出青色和紫红色的重影,模拟老式电视信号干扰的视觉感。背景卡片则笼罩着一层流动的彩色光晕...
吸睛文字
12 种 CSS 文字阴影特效集合,其中包含「火焰灼烧」、「故障艺术」两种动态文字这是一套文字视觉效果合集,基于CSS text-shadow属性实现。包含霓虹发光、3D立体、火焰灼烧(动态)、色差分离、像素风、凸版印刷、彩虹渐变、故障艺术(动态)、长投影、描边轮廓、全息光效...
相册
纯 CSS 模糊背景相框画廊效果这是一款图片展示效果,基于CSS Mask遮罩技术实现。每张照片呈现出"照片叠加相框"的视觉层次,中心区域保持清晰锐利,周围自然过渡到模糊背景,营造出景深和立体感。鼠标悬停图片呈现缓慢拉近的过渡...
比对滑块
图片前后对比滑块,原生JS+CSS变量实现的响应式对比工具这是一款基于原生JavaScript(仅两行代码)和CSS变量实现的图片前后对比滑块组件,专为展示图片修复、图片压缩、设计迭代、产品优化等前后差异场景设计。交互逻辑直观高效:中间的垂直分割线配有...
滚动自动轮播
纯 CSS 实现的图文主题卡片无限循环自动滚动+悬停暂停交互效果这是一款基于纯CSS技术实现的卡片自动轮播效果,通过边缘渐隐遮罩营造出沉浸式的无限滚动体验,无需JavaScript即可实现自动滚动和交互暂停功能。界面的核心设计在于视觉边界处理:轮播容器的左右...