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);
}
實(shí)現(xiàn)的效果都是用css實(shí)現(xiàn)的
主要用到的就是transform-origin
倉(cāng)庫(kù)中還有好多的效果
倉(cāng)庫(kù)地址
