描边生长悬停 · 入场与交互动画
前端Wiki/CSS 特效合集/描边生长悬停

描边生长悬停

悬停时边框由内向外变粗,元素轻微收缩,Hover.css 的 trim

← 返回 入场与交互动画 类特效列表
描边生长

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

CSS 代码

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)}

HTML 结构

HTML
<div class="fx">
<div class="trm">描边生长</div>
</div>
实现要点:border-width 过渡 + scale 微缩的对比手法

其它入场与交互动画类特效

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