1.底部画线，从左边开始，右边结束
html：
<div class="silde-txt">底部划线</div>
css：
<style>
.silde-txt{
???width: 200px;
???color: red;
???position: relative;
???text-align: center;
???margin-top:20px;
}
.silde-txt:before{
???content: "";
???position:absolute;
???width: 200px;
???height: 4px;
???bottom: -4px;
???left: 0px;
???background: deeppink;
???transition: transform .5s;
????transform: scale(0);
????transform-origin: 100% 0;
}
.silde-txt:hover::before{
???transform: scale(1);
???transform-origin: 0 0;
}
</style>
2：背景色1的左边产生，从右边消失
背景色2的上边产生，从下边消失
<div class="bg">背景动画1</div>
<div class="bg2">背景动画1</div>
.bg,.bg2{
??position: relative;
???width: 200px;
???height: 60px;
???line-height: 60px;
???font-size: 32px;
???cursor: pointer;
???color: #333;
???text-align: center;
???transition: color .5s;
???margin: 10px;
}
.bg:after{
??content: "";
???position: absolute;
???left: 0;
???width: 200px;
???height: 60px;
???background: deeppink;
???z-index: -1;
???transform: scale3d(0, 1, 1);
???transform-origin: 100% 50%;
???transition: transform .5s;
}
.bg:hover::after{
??transform: scale3d(1, 1, 1);
??transform-origin: 0% 50%;
??transition-timing-function: ease-in;
}
.bg2::before {
????content: "";
???position: absolute;
???left: 0;
???width: 200px;
???height: 60px;
???background: deeppink;
???z-index: -1;
???transform: scale3d(0, 0, 1);
???transform-origin: 50% 100%;
????transition: transform .5s;
}
.bg2:hover::before{
???????transform: scale3d(1, 1, 1);
???????transform-origin: 50% 0%;
}
css3的transform-origin配合scale，控制动画，实现各种hover效果
原文地址：https://www.cnblogs.com/liliy-w/p/8967443.html