电话
13363039260
如何使用纯CSS实现悬停时右移的按钮效果
2024-01-18 10:49 小编
代码解读
定义dom，导航中包含一个无序列表，列表项中内嵌一个span，文字写在span中：
<nav>
<ul>
<li><span>home</span></li>
</ul>
</nav>
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:#333;
}
隐藏列表项前端的引导符号：
navul{
padding:0;
list-style-type:none;
}
设置按钮的尺寸和颜色：
navli{
width:8em;
height:2em;
font-size:25px;
color:orange;
}
设置文字样式，注意高度是120%，span比它父级的li要高一些：
navlispan{
position:relative;
box-sizing:border-box;
width:inherit;
height:120%;
top:-10%;
background-color:#333;
border:2pxsolid;
font-family:sans-serif;
text-transform:capitalize;
display:flex;
align-items:center;
justify-content:center;
}
将span元素稍向右移：
navlispan{
transform:translateX(4px);
}
用列表项li的左边框画出1条竖线：
navli{
box-sizing:border-box;
border-left:2pxsolid;
}
用列表项的伪元素再画出2条竖线，它们的高度依次降低，至此，按钮左侧一共有3条竖线：
navli{
position:relative;
}
navli::before,
navli::after
{
content:'';
position:absolute;
width:inherit;
border-left:2pxsolid;
z-index:-1;
}
navli::before{
height:80%;
top:10%;
left:-8px;
}
navli::after{
height:60%;
top:20%;
left:-14px;
}
将伪元素的2条竖线的颜色逐渐变暗，增加一点层次感：
navli::before{
filter:brightness(0.8);
}
navli::after{
filter:brightness(0.6);
}
增加鼠标悬停效果，默认状态是按钮遮住3条竖线，当鼠标悬停时，按钮右移，露出3条竖线：
navli:hoverspan{
transform:translateX(4px);
}
navlispan{
/*transform:translateX(4px);*/
transform:translateX(-16px);
transition:0.3s;
}
因为按钮默认状态的位置是偏左的，为了抵销这个偏移量，让列表项稍向右移：
navul{
transform:translateX(16px);
}
在dom中再增加几个按钮：
<nav>
<ul>
<li><span>home</span></li>
<li><span>products</span></li>
<li><span>services</span></li>
<li><span>contact</span></li>
</ul>
</nav>
设置一下按钮的间距：
navli{
margin-top:0.8em;
}
猜你喜欢
联络方式：
13363039260
微信二维码 