基于 GSAP+CSS 打造的沉浸式 3D 环绕图文卡片轮播组件

视界中心

基于 GSAP+CSS 打造的沉浸式 3D 环绕图文卡片轮播组件

这是一款极具空间纵深感的 3D 环绕式轮播效果,基于 GSAP+CSS 技术实现。它彻底抛弃了平面滑动的单调,通过精密的透视算法让每一张卡片在虚拟空间中产生旋转位移,并且支持单图放大预览效果。最...

高速变化的模糊数字动画效果(CSS+JS),让数据变化更有动感

运动模糊数字

高速变化的模糊数字动画效果(CSS+JS),让数据变化更有动感

这是一款带有运动模糊效果的数字计数器,基于CSS+JavaScript技术实现,通过模拟数字高速变化时的视觉拖影,让数字在跳变过程中呈现出流畅的动态轨迹。这种“动起来”的感觉增强了数据变化的冲击...

基于 CSS 的液态玻璃质感通知栏卡片

消息提醒

基于 CSS 的液态玻璃质感通知栏卡片

这是一款液态玻璃风格的通知栏卡片效果,支持响应式布局,基于纯 CSS 技术实现,通过半透明渐变与柔和光影模拟出类似流动玻璃的视觉质感。每条通知都带有轻微的毛玻璃模糊效果,首条消息还带有轻微的中心...

HTML数字快速递增动画效果,通过运动残影模拟数字高速变化状态

数字激增

HTML数字快速递增动画效果,通过运动残影模拟数字高速变化状态

这是一款动态数字快速增加效果,从0快速增加到指定数字。基于CSS/SVG/JS混合技术实现,通过运动残影模拟高速变化状态,适用于数据仪表盘和金融数字展示场景。

CSS背景逐渐模糊效果,可以形象的模拟太阳的升起与降落

背景滤镜

CSS背景逐渐模糊效果,可以形象的模拟太阳的升起与降落

​这是一款背景模糊效果,基于CSS的backdrop-filter属性实现,能够将元素背后的内容进行模糊处理,同时保持前景内容的清晰度,常用于模态框、菜单以及模拟太阳升起、降落等场景,以增强视觉...

CSS渐进模糊遮罩页眉效果,用于图文页面效果更佳!

渐变模糊层

CSS渐进模糊遮罩页眉效果,用于图文页面效果更佳!

这是一款渐进模糊蒙层遮罩效果,当滚动图文页面时,页面的顶部区域会被一层渐变模糊的遮罩所遮挡,标题会放置于遮罩之上。这款效果基于CSS遮罩(mask)技术实现,通过渐变的模糊效果突出焦点区域,适用...

SVG动态模糊光晕Blob动画背景效果,支持自定义光晕长宽尺寸

SVG模糊效果

SVG动态模糊光晕Blob动画背景效果,支持自定义光晕长宽尺寸

这是一款模糊的SVG Blob动画效果,基于CSS和SVG技术实现。动画中的Blob形状从模糊状态逐渐清晰化,同时伴随着形态上的流动变换,创造出一种有机且动态的视觉体验。这种效果常用于背景或装饰...

CSS+SVG 高斯模糊图片背景效果,GSAP实现追随鼠标局部擦除模糊效果

模糊擦除效果

CSS+SVG 高斯模糊图片背景效果,GSAP实现追随鼠标局部擦除模糊效果

这是一款高斯模糊背景图片效果,基于GSAP+CSS+SVG技术实现,鼠标在图片上移动交互过程中,除了焦点区域保持清晰外,周围的图片背景元素会呈现出不同程度的高斯模糊效果,使得用户注意力集中在鼠标...

CSS固定顶部渐变模糊导航菜单效果

磨砂玻璃头部菜单

CSS固定顶部渐变模糊导航菜单效果

​这是一款页面头部渐变磨砂玻璃效果,基于CSS与图形处理技术实现,在页面的顶部菜单导航区域创建出一个具有色彩渐变和模糊过渡的模糊视觉元素,随着页面滚动磨砂玻璃头部固定不动,增强网页设计的深度与互动性。

玻璃形态现代化落地页面 - 带弧形按钮的响应式CSS设计

落地页

玻璃形态现代化落地页面 - 带弧形按钮的响应式CSS设计

这是一款玻璃态现代化落地页布局设计,基于CSS与HTML技术实现,并确保了响应式设计。页面采用了流行的Glassmorphism(玻璃态)风格,通过半透明的背景、柔和的阴影和轻微的模糊效果,创造...

SVG导航菜单项图标带磨砂玻璃悬停效果

镜面分离效果

SVG导航菜单项图标带磨砂玻璃悬停效果

这是一款SVG图标玻璃态效果,基于纯CSS+SVG技术实现,在用户悬停图标时展示出类似毛玻璃的半透明模糊效果。此效果无需JavaScript支持,完全通过CSS和SVG的结合来创建一个现代感十足...

CSS带有边缘模糊过渡效果的Logo滚动轮播动画

滚动轮播

CSS带有边缘模糊过渡效果的Logo滚动轮播动画

这是一款Logo轮播模糊效果,基于CSS3+HTML5技术实现,特别之处在于它使用了mask和backdrop-filter来生成边缘模糊的效果,使轮播中的Logo在移动过程中呈现出柔和的过渡感...