transform结合transition
2019-08-22 本文已影响0人
Ben大师
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
position:relative;
font-size:24px;
text-align:center;
width:150px;
height:40px;
margin:10px;
line-height:40px;
cursor:pointer;
}
div:before{
content:"";
position:absolute;
z-index:-1;
left:0;
bottom:0;
width:150px;
height:2px;
background:deeppink;
transform: scaleX(0);
transition:transform .5s;
}
div:hover:before{
transform:scaleX(1);
}
</style>
</head>
<body>
<div>Hover me</div>
</body>
</html>
出的效果非常的好！参考的网址：http://www.jq22.com/webqd5010
GIF.gif
