第一种方法:
- 刚开始width:0
- 然后鼠标滑过的时候让宽度为100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.变线的长短</title>
<style>
*{
margin: 0;
padding: 0;
}
.bg{
width: 200px;
height: 200px;
line-height: 200px;
background: yellow;
margin: 30px auto;
text-align: center;
}
.bg{
}
.bg .line{
width: 0;
height: 1px;
background:
margin: -60px auto 0;
transition: all .5s linear;
}
.bg:hover .line,.bg:hover p{
color: red;
font-weight: 700;
}
.bg:hover .line{
width: 100%;
background: red;
}
</style>
</head>
<body>
<div class="bg">
<p>梦幻西游</p>
<div class="line"></div>
</div>
</body>
</html>
复制代码
第二种方法:
- 开始的时候transform:scale(0)
- 鼠标滑过的时候transform:scale(1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.变线的长短</title>
<style>
*{
margin: 0;
padding: 0;
}
.bg{
width: 200px;
height: 200px;
line-height: 200px;
background: yellow;
margin: 30px auto;
text-align: center;
}
.bg{
}
.bg .line{
height: 1px;
background:
margin: -60px auto 0;
transform: scale(0);
transition: all .5s linear;
}
.bg:hover .line,.bg:hover p{
color: red;
font-weight: 700;
}
.bg:hover .line{
background: red;
transform: scale(1);
}
</style>
</head>
<body>
<div class="bg">
<p>梦幻西游</p>
<div class="line"></div>
</div>
</body>
</html>
复制代码