悬停浮起卡片
悬停浮起卡片：最实用的卡片特效——悬停时上浮、阴影加重、图片轻微放大。全部用 transition + :hover 实现，一行 JS 都不需要，适合文章列表、商品卡、作品集。
图片放大要包一层 overflow:hidden 容器，img 用 transform: scale(1.08) 放大才不会溢出圆角。
- 卡片 translateY(-8px) + box-shadow 加深
- 图容器 overflow:hidden，图 scale(1.08) 做微距放大
- 所有过渡 .35s ease，柔和不突兀
HTML
<style> .card { width: 260px; margin: 30px auto; border-radius: 14px; overflow: hidden; background: #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.08); transition: transform .35s ease, box-shadow .35s ease; } .card:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(0,0,0,.16); } .card .pic { height: 140px; overflow: hidden; background: linear-gradient(135deg,#a371f7,#4a9eff); transition: transform .5s ease; } .card:hover .pic { transform: scale(1.08); } .card .txt { padding: 14px; color: #333; font-size: 14px; } </style> <div class="card"> <div class="pic"></div> <div class="txt">悬停卡片：整体上浮 + 背景图微距放大</div> </div>
本节要点浮起卡片 = translateY + 阴影 + 图微距；overflow:hidden 是图片放大的前提。
