bV9mBs.gif
bV9mwZ.gif
.div1 {
font-size: 20px;
position: relative;
width: 200px;
height: 60px;
line-height: 60px;
margin: 20px;
}
.div1::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 200px;
background: aquamarine;
height: 2px;
transition: transform .5s;
transform: scaleX(0);
}
.div1:hover::before {
transform: scaleX(1);
}
实现的效果都是用css实现的
主要用到的就是transform-origin
仓库中还有好多的效果
仓库地址
