css3的transform-origin配合scale，控制动画，实现各种hover效果

标签：UNC   enter   absolute   for   ext   底部   背景   html   20px   

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效果

标签：UNC   enter   absolute   for   ext   底部   背景   html   20px   

原文地址：https://www.cnblogs.com/liliy-w/p/8967443.html