Css和JS实现下划线动效的方法示例

下面我将详细讲解如何通过CSS和JS实现下划线动效的方法。在这个攻略中，我会给出两个实现下划线动效的示例。

简单实现下划线动效的CSS方法

1. 首先，HTML需要包裹一个文本，例如一个h1标题或者p段落。

<h1>Hello World</h1>

1. 在CSS文件中添加下列代码块。

h1 {
    position: relative;
}

h1:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #000;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
}

h1:hover:after {
    visibility: visible;
    transform: scaleX(1);
}

JS实现下划线动效的方法

1. 首先，需要添加一段JS代码并引入jQuery库文件。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="index.js"></script>

1. 在HTML文件中添加下列代码块。

<h1 class="animated-underline">Hello World</h1>

1. 在JS文件中添加下列代码块。

var $h1 = $('.animated-underline');

$h1.mouseover(function() {
    //添加下划线动效
    $(this).addClass('underline');
});

$h1.mouseout(function() {
    //移除下划线动效
    $(this).removeClass('underline');
});

1. 在CSS文件中添加下列代码块。

.animated-underline {
    position: relative;
    display: inline-block;
}
.animated-underline:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #000;
    transition: all 0.3s ease-in-out;
}

.animated-underline.underline:after {
    width: 100%;
}

以上是我总结的两种实现下划线动效的方法，希望可以帮到你。