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基础。
