悬停时边框由内向外变粗,元素轻微收缩,Hover.css 的 trim
← 返回 入场与交互动画 类特效列表上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果
.fx .trm{box-sizing:border-box;width:140px;height:90px;margin:60px auto;border:4px solid #4a9eff;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#4a9eff;font-weight:700;transition:all .3s;cursor:pointer}
.fx:hover .trm{border-width:12px;transform:scale(.94)}<div class="fx">
<div class="trm">描边生长</div>
</div>