React 移动端头像点击转场弹窗,个人中心旋转入场交互组件

APP个人弹窗

React 移动端头像点击转场弹窗,个人中心旋转入场交互组件

这是一款移动端头像点击触发的旋转转场个人中心弹窗交互效果,基于 React+Framer Motion 技术实现,点击头像即可唤起带顺滑旋转入场动效的个人信息面板,背景同步做模糊弱化处理,转场过...

 Liquid Glass液态玻璃气泡效果,Three.js实现的Metaball折射交互动画

液态气泡

Liquid Glass液态玻璃气泡效果,Three.js实现的Metaball折射交互动画

这是一款液态玻璃气泡效果,基于 Three.js + WebGL + Metaball 算法技术实现,模拟真实水泡的透明质感、光线折射与表面张力——气泡之间靠近时会自然"粘连融合",拖拽可实时交...

GSAP全屏图片弧形自动滚动切换特效 | 景深模糊过渡的高端滑块组件

圆弧滑块

GSAP全屏图片弧形自动滚动切换特效 | 景深模糊过渡的高端滑块组件

这是一款全屏沉浸式图片切换效果,基于 GSAP + CSS 技术实现。切换时,下一张图片从背景虚化状态逐渐推近、聚焦,同时左侧大字标题跟随流畅过渡,背景色也随内容联动变换——整个过程一气呵成,有...

手机屏360度3D旋转演示动画,纯 CSS 实现手机隐私屏幕(防窥屏)模拟效果

手机演示

手机屏360度3D旋转演示动画,纯 CSS 实现手机隐私屏幕(防窥屏)模拟效果

这是一款模拟三星 Galaxy S26 Ultra 隐私屏功能的交互效果,基于 CSS ::before 和 ::after 伪元素实现。核心玩法是:鼠标靠近手机时屏幕内容清晰可见,鼠标移开后视...

超写实雨滴玻璃动态壁纸生成器(WebGL+CSS)|支持日历+本地实时天气

实时壁纸

超写实雨滴玻璃动态壁纸生成器(WebGL+CSS)|支持日历+本地实时天气

这是一款基于 WebGL + CSS Glassmorphism 技术实现的雨天玻璃模拟效果,雨滴的折射、流淌、聚合全部逼真还原,不是简单的动图,而是实时渲染的物理级视觉体验。背景支持自定义图片...

纯 CSS 全息故障文字动画效果+3D漂浮流光卡片

流光

纯 CSS 全息故障文字动画效果+3D漂浮流光卡片

这是一款全息故障文字动画效果,基于纯CSS技术实现。标题文字带有RGB色彩分离的故障艺术风格,字母边缘会闪现出青色和紫红色的重影,模拟老式电视信号干扰的视觉感。背景卡片则笼罩着一层流动的彩色光晕...

12 种 CSS 文字阴影特效集合,其中包含「火焰灼烧」、「故障艺术」两种动态文字

吸睛文字

12 种 CSS 文字阴影特效集合,其中包含「火焰灼烧」、「故障艺术」两种动态文字

这是一套文字视觉效果合集,基于CSS text-shadow属性实现。包含霓虹发光、3D立体、火焰灼烧(动态)、色差分离、像素风、凸版印刷、彩虹渐变、故障艺术(动态)、长投影、描边轮廓、全息光效...

纯 CSS 模糊背景相框画廊效果

相册

纯 CSS 模糊背景相框画廊效果

这是一款图片展示效果,基于CSS Mask遮罩技术实现。每张照片呈现出"照片叠加相框"的视觉层次,中心区域保持清晰锐利,周围自然过渡到模糊背景,营造出景深和立体感。鼠标悬停图片呈现缓慢拉近的过渡...

图片前后对比滑块,原生JS+CSS变量实现的响应式对比工具

比对滑块

图片前后对比滑块,原生JS+CSS变量实现的响应式对比工具

这是一款基于原生JavaScript(仅两行代码)和CSS变量实现的图片前后对比滑块组件,专为展示图片修复、图片压缩、设计迭代、产品优化等前后差异场景设计。交互逻辑直观高效:中间的垂直分割线配有...

纯 CSS 实现的图文主题卡片无限循环自动滚动+悬停暂停交互效果

滚动自动轮播

纯 CSS 实现的图文主题卡片无限循环自动滚动+悬停暂停交互效果

这是一款基于纯CSS技术实现的卡片自动轮播效果,通过边缘渐隐遮罩营造出沉浸式的无限滚动体验,无需JavaScript即可实现自动滚动和交互暂停功能。界面的核心设计在于视觉边界处理:轮播容器的左右...

黑金配色高端 Tailwind CSS + GSAP 着陆页网页模板

黑金叶

黑金配色高端 Tailwind CSS + GSAP 着陆页网页模板

这是一款可复用的深色系着陆页模板,基于Tailwind CSS + GSAP滚动动画技术实现。整体采用黑色背景搭配金色点缀的配色方案,营造出高端奢华的视觉氛围,特别适合展示品牌形象和专业服务。模...

JS+SVG 驱动的 Halftone 半调网点创意揭幕动效

转场动效

JS+SVG 驱动的 Halftone 半调网点创意揭幕动效

这是一款极具视觉冲击力的创意动效,基于 JS 与 SVG 技术协同实现。它借鉴了经典报纸印刷中的“半调网点(Halftone)”工艺,通过动态控制成千上万个矢量圆点的尺寸缩放,实现从局部到整体的...