你好老师，请问一下一定，目标，努力旁边的那个小三角形。旋转了后掉下来很多。怎么像上面那个三角形一样，在那个中心旋转
来源：2-3 页面顶部的开发（2）
慕仰1291499
2022-06-20 10:40:41
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/css.css">
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<header class="head">
<div class="head-bar">
<div class="head-width">
<nav class="head-right">
<ul>
<li class="tb">
<a href="">目标</a>
<em class="box">
<b></b>
<i></i>
</em>
<div class="list dfsq">
<ul>
<li><a href="">东方神起</a></li>
<li><a href="">郑允浩</a></li>
<li><a href="">金在中</a></li>
<li><a href="">朴有天</a></li>
<li><a href="">沈昌珉</a></li>
<li><a href="">金俊秀</a></li>
</ul>
</div>
</li>
<li><a href="">奋斗</a></li>
<li class="tb">
<a href="">暴富</a>
<em class="box">
<b></b>
<i></i>
</em>
<div class="list zyh">
<ul>
<li><a href="">东方神起</a></li>
<li><a href="">郑允浩</a></li>
<li><a href="">金在中</a></li>
<li><a href="">朴有天</a></li>
<li><a href="">沈昌珉</a></li>
<li><a href="">金俊秀</a></li>
</ul>
</div>
</li>
<li><a href="">期待</a></li>
<li class="tb">
<a href="">成长</a>
<em class="box">
<b></b>
<i></i>
</em>
<div class="list jzz">
<ul>
<li><a href="">东方神起</a></li>
<li><a href="">郑允浩</a></li>
<li><a href="">金在中</a></li>
<li><a href="">朴有天</a></li>
<li><a href="">沈昌珉</a></li>
<li><a href="">金俊秀</a></li>
</ul>
</div>
</li>
<li><a href="">获得</a></li>
</ul>
</nav>
<div class="head-left">
<a href="" class="iconfont"></a>
<span><a href="">|</a></span>
<a href="" class="iconfont"></a>
<a href="" class="iconfont"></a>
<a href="" class="iconfont"></a>
<a href="" class="iconfont">登录</a>
<a href="" class="iconfont">注册</a>
</div>
</div>
</div>
<nav class="head-main">
<div class="head-width">
<ul>
<li><a href="">前进</a></li>
<li class="sj">
<a href="">一定</a>
</li>
<li><a href="">到达</a></li>
<li class="sj">
<a href="">目标</a>
</li>
<li><a href="">方向</a></li>
<li class="sj">
<a href="">努力</a>
</li>
<li><a href="">刻苦</a></li>
</ul>
</div>
</nav>
</header>
</body>
</html>
css
.head{
height: 150px;
}
.head .head-bar{
height: 36px;
background-color: #2a2a2a;
line-height: 36px;
}
.head .head-bar .head-right > ul > li{
float: left;
margin-right: 18px;
}
.head .head-bar .head-right > ul > li a{
color: white;
}
.head .head-bar .head-right > ul > li.tb{
padding-right: 16px;
}
.head .head-bar .head-right > ul > li.tb{
position: relative;
}
.head .head-bar .head-right > ul > li.tb .box{
position: absolute;
width: 12px;
height: 12px;
top: 12px;
transition: transform 0.3s ease 0s;
}
.head .head-bar .head-right > ul > li.tb:hover .box{
transform: rotate(180deg);
}
.head .head-bar .head-right > ul > li.tb b{
position: absolute;
width: 6px;
height: 6px;
background-color: white;
transform: rotate(45deg);
top: 3px;
right: 3px;
}
.head .head-bar .head-right > ul > li.tb i{
position: absolute;
width: 6px;
height: 6px;
background-color: #2a2a2a;
transform: rotate(45deg);
top: 2px;
right: 3px;
}
.head .head-bar .head-right > ul > li.tb .list{
display: none;
position: absolute;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.20);
z-index: 9999;
}
.head .head-bar .head-right > ul > li.tb:hover .list{
display: block;
}
.head .head-bar .head-right > ul > li.tb .list a{
color: #2a2a2a;
font-size: 12px;
}
.head .head-bar .head-right > ul > li.tb .list a:hover{
color: orange;
}
.head .head-bar .head-right > ul > li.tb .dfsq{
width: 90px;
}
.head .head-bar .head-right > ul > li.tb .zyh{
width: 100px;
}
.head .head-bar .head-right > ul > li.tb .jzz{
width: 80px;
}
.head .head-bar .head-left{
float: right;
}
.head .head-bar .head-left a , .head .head-bar .head-left span{
color: white;
padding-right: 8px;
}
.head .head-main{
height: 40px;
background-color: aquamarine;
line-height: 40px;
}
.head .head-main ul li{
float: left;
margin-right: 18px;
}
.head .head-main ul li a{
color: white;
}
.head .head-main ul li.sj{
position: relative;
padding-right: 16px
}
.head .head-main ul li.sj::after{
content: '';
position: absolute;
border-bottom: none;
border: 5px solid transparent;
border-top-color:white ;
top: 18px;
transition: transform .5s ease 0s;
}
.head .head-main ul li.sj:hover:after{
transform: rotate(180deg);
}
1回答
-
imooc_慕慕
2022-06-20
同学你好，是border-bottom: none;写的位置不对，要设置边框之后，再设置下边框为none；
祝学习愉快~
0
相似问题