如何使用纯CSS实现悬停时右移的按钮效果
时间2024-05-21 14:40:03发布访客分类CSS浏览74
导读： 代码解读 定义dom，导航中包含一个无序列表，列表项中内嵌一个span，文字写在span中： home 居中显示： body{ margin:0; height:100...
代码解读
定义dom，导航中包含一个无序列表，列表项中内嵌一个span，文字写在span中：
居中显示：
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中再增加几个按钮：
- home
- products
- services
- contact
设置一下按钮的间距：
navli{
margin-top:0.8em;
}
本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何使用纯CSS实现悬停时右移的按钮效果
本文地址： https://pptw.com/jishu/664933.html
