悬停浮起卡片 · 卡片
前端Wiki/CSS 特效合集/悬停浮起卡片

悬停浮起卡片

悬停时卡片整体上浮,阴影加深,百搭的内容卡片动效

← 返回 卡片 类特效列表
悬停卡片:整体上浮 + 背景微距放大

上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果

CSS 代码

CSS
.fx .card2{width:250px;margin:30px auto;border-radius:14px;overflow:hidden;background:#1c2330;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.28);transition:transform .35s ease,box-shadow .35s ease}
.fx .card2:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.fx .card2 .pic{height:110px;background:linear-gradient(135deg,#a371f7,#4a9eff);transition:transform .5s ease}
.fx .card2:hover .pic{transform:scale(1.08)}
.fx .card2 .txt{padding:14px;color:#c9d1d9;font-size:14px}

HTML 结构

HTML
<div class="fx">
<div class="card2"><div class="pic"></div><div class="txt">悬停卡片:整体上浮 + 背景微距放大</div></div>
</div>
实现要点:浮起 = translateY + 阴影 + overflow:hidden 配合内部放大

其它卡片类特效

回到 前端Wiki 首页 · CSS 特效合集