你好老师！请问一下动力，意义，成功旁边的小三角形。旋转的时候是以右边为中心。怎么设置到以中心为起点旋转。谢谢！
来源：2-2 页面顶部的开发（1）
慕仰1291499
2022-06-10 12:08:01
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/rest.css">
</head>
<body>
<header class="wm">
<div class="wm-head">
<div class="wm-kuan">
<nav class="wm-right">
<ul>
<li><a href="">方向</a></li>
</ul>
<ul>
<li class="wm-list">
<a href="">动力</a>
<em class="box">
<b></b>
<i></i>
</em>
<div class="main hc">
<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>
<li><a href="">哈密瓜味</a></li>
</ul>
</div>
</li>
</ul>
<ul>
<li><a href="">目标</a></li>
</ul>
<ul>
<li class="wm-list">
<a href="">意义</a>
<em class="box">
<b></b>
<i></i>
</em>
<div class="main cm">
<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>
</ul>
</div>
</li>
</ul>
<ul>
<li><a href="">获得</a></li>
</ul>
<ul>
<li><a href="">到达</a></li>
</ul>
<ul>
<li class="wm-list">
<a href="">成功</a>
<em class="box">
<b></b>
<i></i>
</em>
<div class="main fd">
<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>
</ul>
</nav>
<div class="wm-left">
<a href="" class="iconfont"></a>
<span>|</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="wm-main">
<div class="wm-kuan">
<ul >
<li class="wm-xs">
<a href="">向上</a>
<div class="qb jy">
<dl>
<dt>全部</dt>
<dd>
<a href="">加油</a>
<a href="">奋斗</a>
<a href="">一定行</a>
<a href="">我最棒</a>
<a href="">加油</a>
</dd>
</dl>
</div>
</li>
<li><a href="">加油</a></li>
<li><a href="">雄起</a></li>
<li class="wm-xs">
<a href="">可以</a>
<div class="qb yd">
<dl>
<dt>全部</dt>
<dd>
<a href="">加油</a>
<a href="">奋斗</a>
<a href="">一定行</a>
<a href="">我最棒</a>
<a href="">加油</a>
</dd>
</dl>
</div>
</li>
<li><a href="">完美</a></li>
<li class="wm-xs">
<a href="">目标</a>
<div class="qb hh">
<dl>
<dt>全部</dt>
<dd>
<a href="">加油</a>
<a href="">奋斗</a>
<a href="">一定行</a>
<a href="">我最棒</a>
<a href="">加油</a>
</dd>
</dl>
</div>
</li>
<li><a href="">达到</a></li>
</ul>
</div>
</nav>
<div class="wm-wlkq">
<div class="wm-kuan">
<h1>未来可期</h1>
</div>
<div class="ss">
<input type="text" placeholder="请输入你想查找的内容">
<a href="" class="btn iconfont"></a>
</div>
</div>
</header>
</body>
</html>
css：
.wm{
height: 150px;
}
.wm .wm-head {
height: 36px;
background-color: #2a2a2a;
line-height: 36px;
}
.wm .wm-head .wm-right > ul >li {
float: left;
margin-right: 20px;
}
.wm .wm-head .wm-right > ul > li a{
color: white;
}
.wm .wm-head .wm-right > ul > li.wm-list a{
padding-right: 20px;
}
.wm .wm-head .wm-right > ul > li.wm-list{
position: relative;
}
.wm .wm-head .wm-right > ul > li.wm-list .box{
position: absolute;
top: 50%;
margin-top: -6px;
right: 6px;
width: 12px;
height: 12px;
transition: transform .3s linear 0s;
}
.wm .wm-head .wm-right > ul > li.wm-list .box:hover{
transform: rotate(180deg);
}
.wm .wm-head .wm-right > ul >li.wm-list b{
position: absolute;
top: 4px;
right: 6px;
width: 6px;
height: 6px;
background-color: white;
transform: rotate(45deg);
}
.wm .wm-head .wm-right > ul > li.wm-list i{
position: absolute;
right: 6px;
top: 2px;
width: 6px;
height: 6px;
background-color: #2a2a2a;
transform: rotate(45deg);
}
.wm .wm-head .wm-right .wm-list .main{
position: absolute;
z-index: 9999;
display: none;
top: 36px;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.20);
}
.wm .wm-head .wm-right .wm-list:hover .main{
display: block;
}
.wm .wm-head .wm-right .wm-list .main a{
color: #2a2a2a;
font-size: 12px;
}
.wm .wm-head .wm-right .wm-list .main a:hover{
color: orange;
}
.wm .wm-head .wm-right .wm-list .hc{
width: 90px;
}
.wm .wm-head .wm-right .wm-list .cm{
width: 60px;
}
.wm .wm-head .wm-right .wm-list .fd{
width: 80px;
}
.wm .wm-left{
float: right;
}
.wm .wm-left a , .wm .wm-left span{
margin-right: 10px;
color: white;
font-size: 15px;
}
.wm .wm-main{
height: 40px;
background-color: aquamarine;
line-height: 40px;
}
.wm .wm-main ul li{
float: left;
margin-right: 20px;
}
.wm .wm-main ul li a{
color: white;
}
.wm .wm-main ul li.wm-xs{
position: relative;
}
.wm .wm-main ul li.wm-xs::after{
content: '';
position: absolute;
border: 5px solid transparent;
border-bottom: none;
border-top-color:white ;
top: 18px;
right: 9px;
transition: transform 0.3s ease 0s;
}
.wm .wm-main ul li.wm-xs:hover::after{
transform: rotate(180deg);
}
.wm .wm-main .wm-xs a {
margin-right: 20px;
}
.wm .wm-main .wm-xs .qb{
position: absolute;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.20);
display: none;
}
.wm .wm-main .wm-xs:hover .qb{
display: block;
}
.wm .wm-main .wm-xs .qb a{
font-size: 14px;
color: #2a2a2a;
}
.wm .wm-main .wm-xs .qb a:hover{
color: orange;
}
.wm .wm-main .wm-xs .jy{
width: 140px;
}
.wm .wm-main .wm-xs .yd{
width: 130px;
}
.wm .wm-main .wm-xs .hh{
width: 110px;
}
.wm .wm-wlkq{
height: 40px;
padding: 12px 0;
}
.wm .wm-wlkq h1{
float: left;
color: aquamarine;
font-size: 26px;
font-weight: bold;
line-height: 40px;
padding-right: 20px;
}
.wm .wm-wlkq .ss{
float: left;
}
.wm .wm-wlkq .ss input{
float: left;
width: 360px;
height: 28px;
border: 1px solid aquamarine;
border-radius:4px 0 0 4px;
margin-top: 7px;
font-size: 12px;
}
.wm .wm-wlkq .ss .btn{
float: left;
width: 28px;
height: 30px;
background-color: aquamarine;
border-radius:0 4px 4px 0 ;
margin-top: 7px;
line-height: 30px;
text-align: center;
color: white;
}
1回答
-
好帮手慕星星
2022-06-10
同学你好，是b和i定位的原因，这两个元素定位在em中心位置，就会以中心旋转。参考修改：
祝学习愉快！
0
相似问题