GSAP 悬停交互
GSAP 实现的图片卡片随鼠标移动产生位移,创意网页展示必备这是一款横向滚动卡片悬停交互效果,基于 GSAP.js 动画库实现,鼠标悬停卡片时卡片滚动位移丝滑无卡顿,并且标题自动高亮变色,交互反馈清晰直观,适用于个人作品集、摄影画廊、品牌官网等需要横向内...
趣味倾倒音量滑块
可交互悬停式音量滑块动效组件(CSS+JS)这是一款基于 CSS+JavaScript 实现的悬停式音量控制滑块效果。它通过鼠标悬停即可调整音量大小,滑块会随数值变化动态倾斜、填充进度,搭配霓虹质感的发光效果,交互反馈清晰直观,适用于音视...
玻璃质感导航栏
苹果风液态玻璃导航栏交互效果(CSS+JS),明暗双主题网页导航组件这是一款苹果风液态玻璃质感导航栏交互效果,基于 CSS+JS 技术实现,适配明暗双主题模式,自带顺滑的菜单项切换动效与细腻的悬停微光反馈,通透的玻璃拟态视觉高级感出众,交互流畅自然,适用于品牌官...
倾斜悬浮卡片
纯 CSS 实现 3D 倾斜卡片横向画廊这是一款基于纯 CSS 3D 变换实现的横向滚动卡片画廊。默认状态下所有卡片以统一的透视倾斜角度排列,像一排被推倒的多米诺牌,本身就已经很有空间纵深感。悬停时焦点卡片「站直」回正,虚线边框浮现,...
横向图库
纯 CSS 实现的支持横向拖拽切换图片的响应式高端画廊这是一款基于 CSS 实现的横向图片画廊,支持左右滑动切换照片,最有意思的设计在于把滚动条本身当作分页进度条来用——底部那条绿色细线不是装饰,而是实时反映当前浏览位置的滚动指示器,一举两得。画廊...
散落卡片
纯 CSS 实现 3D 名片飞散悬浮场景 + 灯箱预览这是一款纯 CSS 实现的 3D 悬浮名片展示效果。多张名片以随机角度散落在一个模拟木地板的三维空间中,带透视感的排列让整个场景有种「刚从桌上洒落」的真实质感。交互分三步走:初始状态名片自然飘散...
手风琴卡片
纯 CSS 弹性手风琴卡片展开效果这是一款零JS依赖的弹性手风琴卡片组件,基于纯 CSS Flexbox 实现。如演示所示,未激活的卡片呈灰度收缩状态,悬停后平滑展开并还原全彩色,描述文字从底部上滑显示,视觉反差感强、过渡自然。...
手绘下划线
纯 SVG + CSS 实现的 9 种不同风格手绘下划线悬停动画效果这是一款手绘下划线悬停动画效果,基于CSS动画+SVG Symbols+极简JavaScript技术实现。鼠标悬停导航文字时,会出现手绘风格的下划线,带有轻微的不规则感和动态描绘过程,每次显示还...
切角分割图库
纯 CSS 可展开式图片画廊切角效果这是一款可展开式图片画廊效果,基于CSS Grid和corner-shape:notch切角技术实现。默认状态下4张建筑图片均匀排列,当鼠标悬停某张图片时,它会立即展开占据更大空间,同时其他图片...
图片悬停
纯 CSS 图片悬停缩放圆角边框效果这是一款图片悬停缩放边框效果,基于CSS transform和transition技术实现。鼠标悬停时,图片会产生轻微的放大效果,同时边框样式也会发生变化,给人一种图片"呼吸"般的动态感受。适用...
logo滚动
GSAP 无缝 Logo 图片无限滚动展示效果这是一款品牌Logo轮播效果,基于GSAP动画库实现。多个品牌标志在页面中水平无限循环滚动,视觉上完全无缝衔接,鼠标悬停时自动暂停,移开后继续滚动,移动端支持触摸交互。传统的Logo墙要么是静态...
3D按钮
纯 CSS 带按压抬起 3D 反馈效果的拟物化风格按钮这是一款按钮交互效果,基于 CSS 阴影和变形技术实现。按钮模拟了真实物理按键的按压体验:默认状态下呈现凸起的立体感,悬停或者点击时会"陷"下去,完全还原了按实体按钮的触感反馈。这种设计最大的价...