悬停时卡片整体上浮,阴影加深,百搭的内容卡片动效
← 返回 卡片 类特效列表上方为纯 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}<div class="fx">
<div class="card2"><div class="pic"></div><div class="txt">悬停卡片:整体上浮 + 背景微距放大</div></div>
</div>