CSS3制作下划线动画

最新推荐文章于 2025-07-26 10:39:24 发布

原创最新推荐文章于 2025-07-26 10:39:24 发布 · 773 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

CSS 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何使用CSS3创建下划线动画效果，包括四种不同的实现方法：通过transform的rotateY属性、改变宽度、transform的scale属性以及再次通过改变宽度。不同方法的区别在于动画效果，如rotateY和宽度变化保持颜色恒定，而scale则带有淡入淡出效果。

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

通常在页面载入/鼠标移到文字上方时，要有下划线从无到有的动画效果，下面用hr标签和a标签举例说明：

html代码

<div class="pic-wrapper">
    <p>
    <hr class="first-hr">
    <br>
    <hr class="second-hr">
    </p>
    <br>
    <a class="demo-a">aaaaaaaa</a>
    <br>
    <a class="demo-b">bbbbbbbb</a>
</div>

css代码

.pic-wrapper {
    width: 500px;
    height: 500px;
    margin: 0 auto;
    background: #ccc;
}
p {
    width: 100%;
    height: 100px;
    margin: 100px auto;
    text-align: center;
}
//method 1
.first-hr {
    max-width: 100px;
    height: 0;
    border: none;
    border-top: 2px solid #000;
    transition: all 2s;
    transform: rotateY(90deg);
}
.first-hr-show {
    transform: rotateY(0deg);
}
//method 2
.second-hr {
    width: 0;
    max-width: 100px;
    height: 0;
    border: none;
    border-top: 2px solid #000;
    transition: all 2s;
}
.second-hr-show {
    width: 100%;
}
//method 3
.demo-a,.demo-b {
    position: relative;
    text-decoration: none;
    font-size: 20px;
    color: #333;
}
.demo-a:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 100%;
    background: #3e83f7;
    transition: all 2s;
    transform: scale(0);
}
.demo-a:hover:before {
    transform: scale(1);
}
//method 4
.demo-b:before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    height: 2px;
    width: 0;
    background: #3e83f7;
    transition: all 2s;
}
.demo-b:hover:before {
    width: 100%;
    left: 0;
    right: 0;
}