GSAP 实现的图片卡片随鼠标移动产生位移,创意网页展示必备

GSAP 悬停交互

GSAP 实现的图片卡片随鼠标移动产生位移,创意网页展示必备

这是一款横向滚动卡片悬停交互效果,基于 GSAP.js 动画库实现,鼠标悬停卡片时卡片滚动位移丝滑无卡顿,并且标题自动高亮变色,交互反馈清晰直观,适用于个人作品集、摄影画廊、品牌官网等需要横向内...

丝滑交互:纯 CSS 实现的 Dropbox 风格动态色板

彩色板

丝滑交互:纯 CSS 实现的 Dropbox 风格动态色板

这是一款交互式色彩色板展示效果,基于 纯 CSS 技术实现。它复刻了 Dropbox 经典的色块交互细节,通过平滑的悬停动效实现色卡的动态升起与聚焦,适用于设计规范(Design System)...

用户资料卡片组件,支持明暗模式与丝滑的悬停详情展示动画

资料卡片

用户资料卡片组件,支持明暗模式与丝滑的悬停详情展示动画

这是一款支持明暗模式切换的动画用户卡片组件,基于 CSS 过渡动画技术实现,支持悬停卡片展示用户详细信息,并提供关注及粉丝数等功能按钮,此外还支持轻盈浅色与沉稳深色两种样式的平滑切换,卡片既能清...

CSS悬停卡片及图片反转圆角变形效果

圆角变形卡片

CSS悬停卡片及图片反转圆角变形效果

这是一款动态形状变换效果,基于CSS clip-path 和过渡动画实现,元素默认带有内凹圆角,悬停时平滑切换为外凸圆角或扭曲变形,适用于创意按钮、卡片或交互式视觉元素。

CSS悬停图片、卡片等元素实现3D视差效果

3D视差

CSS悬停图片、卡片等元素实现3D视差效果

这是一款3D卡片悬停视差效果,基于CSS 3D变换技术实现,当鼠标悬停时元素(图片、卡片等元素)产生深度位移,形成立体动态响应,适用于产品展示或交互式卡片场景。

CSS悬停动态裁剪六种多边形图片边框卡片,并带有文字信息及操作按钮

悬停卡片

CSS悬停动态裁剪六种多边形图片边框卡片,并带有文字信息及操作按钮

这是一款基于CSS的 clip-path 动画等属性实现的卡片交互效果,悬停时图像裁剪为圆形、五边形等共六款多边形边框展开并滑出文字信息与操作按钮,适用于作品集或产品展示的渐进式披露场景。

Web Component技术实现的悬停卡片背景呈现闪烁像素化效果源码下载

悬停闪烁像素化

Web Component技术实现的悬停卡片背景呈现闪烁像素化效果源码下载

这是一款像素画布背景效果,基于Web Component技术实现,当鼠标悬停在元素上时,背景呈现闪烁的像素化效果,增添科技感和互动性。

JS+CSS实现的超简约响应式悬停卡片效果,卡片追随鼠标晃动效果

卡片悬停

JS+CSS实现的超简约响应式悬停卡片效果,卡片追随鼠标晃动效果

​这是一款超简单的响应式卡片悬停效果,基于CSS+JS技术实现,确保在各种屏幕尺寸下都能提供一致的用户体验。当用户的鼠标悬浮在卡片上时,卡片会以简洁而直观的方式改变外观,比如追随鼠标卡片晃动、颜...