效果圖
方法一：使用轉換中的角度轉換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
nav{
width: 200px; height: 40px;
background: #363636; margin: 50px auto;
display:flex; justify-content: space-between;
}
div{
width: 100px; height: 40px;
position: relative;;
}
a{
display: block; width: 100px; height: 40px; color: #fff;
line-height: 40px; text-align: center;
position: absolute; top: 0; left: 0;
}
div:hover a{
background: red; color:#fff
}
span{
width: 100px; height: 5px; background: red;
position: absolute; top: -5px; left: 0;
transform: rotateY(90deg);
}
div:hover span{
transform: rotateY(0deg);
transition: transform 0.5s;
}
</style>
</head>
<body>
<nav>
<div>
<a href="#">首頁</a>
<span></span>
</div>
<div>
<a href="#">論壇</a>
<span></span>
</div>
</nav>
</body>
</html>
方法二：使用轉換中的縮放轉換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
nav{
width: 200px; height: 40px; background: #363636;
margin: 50px auto; display: flex; justify-content: space-between;
}
div{
width: 100px; height: 40px; position: relative;
}
a{
display: block; width: 100px; height: 40px;
line-height: 40px; text-align: center; color: #fff;
}
span{
width: 10px; height: 5px;
position: absolute; top: -5px; left: 50%;
margin-left: -5px;
}
div:hover a{
background: red; color: #fff;
}
div:hover span{
transform: scaleX(10); background: red;
transition: transform 0.5s;
}
</style>
</head>
<body>
<nav>
<div>
<a href="#">首頁</a>
<span></span>
</div>
<div>
<a href="#">論壇</a>
<span></span>
</div>
</nav>
</body>
</html>