使用scale 和 transform-origin 实现下划线跟随效果

最新推荐文章于 2022-05-15 22:03:56 发布

原创

最新推荐文章于 2022-05-15 22:03:56 发布 · 394 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#scale #css #transform-origin #下划线 #跟随

这篇博客探讨了如何使用CSS的scale和transform-origin属性实现下划线跟随的hover动画效果。难点在于如何在hover离开时改变动画方向。通过将hover动画分解为进入、停留和离开三个状态，并调整transform-origin，成功创建了从一端进入另一端离开的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

难点所在

这个动画效果中，下划线是从一端进入，从另外一端离开的。而且，这个 hover 动画是纯 CSS 实现的。

还原效果

正常而言，我们一个 hover 效果，可能就是从哪里来，回哪里去，大部分的应该是这样的：

html : 
    <div>hover me</div>
css:
    div {
        position: relative;
        width: 200px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        margin: 20px auto;
        font-size: 32px;
        color: #333;
        cursor: pointer;
    }
    div:before {
        content: "";
        display: block;
        height: 2px;
        background-color: red;
        position: absolute;
        bottom: 0;

    }
    div::before {
        left: 0;
        width: 0;