本文章介绍了CSS3之transition实现下划线的示例代码，分享给大家，具体如下：
在这里先看看我们的demo
认识transition
这是CSS3中新增的一个样式，可以实现动画的过度。通常使用在添加某种效果可以从一种样式转变到另一个的时候。
transition属性
transition: width 1s linear 2s; /*简写实例*/
/*等同如下*/ transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s;
tranform属性
实现我们需要的效果
当然，在这就直接放出代码，代码中有注释方便理解
/*css代码*/
h2{
position: relative;
padding: 15px;
text-align: center;
}
button{
width: 100px;
height: 40px;
border-radius: 15px;
border: none;
background: #188FF7;
color: #fff;
outline: none;
cursor: pointer;
font-weight: bold;
}
button:hover{
background: #188EA7;
}
.container{
width: 600px;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
}
.line{
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
transition: transform .5s;
background: #188EA7;
color: #188EA7;
transform: scaleX(0);
z-index: 1111;
}
@keyframes changeColor1{
from{
color: #000;
}
to{
color: #188EA7;
}
}
@keyframes changeColor2{
from{
color: #188EA7;
}
to{
color: #000;
}
}
<!--html代码-->
<div class="container">
<h2 id="title">
百度前端学院
<i class="line" id="line"></i>
</h2>
<button id="change">Change</button>
</div>
//js部分代码
(function () {
let btn = document.getElementById('change');
let h2 = document.getElementById('title');
let line = document.getElementById('line');
let count = 0;
btn.onclick = function () {
if(count%2===0){
line.style.transform = "scaleX(1)";
h2.style.animation = "changeColor1 1s";
h2.style.color = "#188EA7";
count++;
}else{
line.style.transform = "scaleX(0)";
h2.style.animation = "changeColor2 1s";
h2.style.color = "#000";
count++;
}
}
})();
到这里我们就已经将此效果完全呈现，同时我们也学习了CSS3中的transition属性和tranform属性。当然完成此动画还需要有一些html和css基础。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
