前端Wiki/CSS3/进阶/过渡 transition

实战悬停交互

综合 transition 做一组现代网页最常见的悬停交互：卡片抬升、按钮滑入、图片遮罩渐显。三者的共同配方是「稳定态写 transition，悬停态只改属性值」。

卡片抬升：transform: translateY(-6px) 加阴影加深，注意不用 top/margin 做位移——transform 不触发重排，性能好得多。
按钮箭头滑入：伪元素定位在按钮左侧外，悬停时移入，overflow:hidden 裁掉初始状态。
图片遮罩：遮罩层 opacity 0，悬停变 1；文字同时上移几像素，双重过渡叠加出细腻质感。

核心心法：可过渡的属性优先选 transform 和 opacity，它们由合成器处理，动画期间不触发布局计算，最流畅。

本节要点悬停交互三件套：抬升用 translateY、滑入用伪元素位移、显隐用 opacity；动效属性首选 transform/opacity，避开 top/margin 引发的重排。

CSS

<style>
  .pic {
    position: relative;
    width: 200px; height: 120px;
    border-radius: 8px; overflow: hidden;
    background: linear-gradient(135deg,#39c5cf,#2667a0);
  }
  .pic .cover {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.55);
    color: #fff;
    display: flex; align-items: center;
    justify-content: center;
    opacity: 0;                 /* 初始隐藏 */
    transition: opacity .3s;
  }
  .pic:hover .cover { opacity: 1; }
  .go {
    position: relative;
    overflow: hidden;           /* 裁掉场外箭头 */
    padding: 8px 20px;
    border: 1px solid #39c5cf;
  }
  .go::after {
    content: ' →';
    position: absolute; left: -20px;
    transition: left .3s;
  }
  .go:hover::after { left: auto; right: 8px; }
</style>
<div class="pic"><span class="cover">查看详情</span></div>
<button class="go" style="margin-top:10px;">查看更多</button>

🔗 相关词条transition transform 伪元素网页元素阴影过渡

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读