介绍
这篇文章主要介绍怎么使用纯CSS实现悬停时右移的按钮效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
效果预览
源代码下载https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom,导航中包含一个无序列表,列表项中内嵌一个<代码>时间> 时间> & lt; nav>
& lt; ul>
& lt; li> & lt; span> home & lt;/li>
& lt;/ul>
& lt;/nav> 居中显示:
身体{
保证金:0;
身高:100 vh;
显示:flex;
对齐项目:中心;
justify-content:中心;
background - color: # 333;
} 隐藏列表项前端的引导符号:
nav ul {
填充:0;
list-style-type:没有;
} 设置按钮的尺寸和颜色:
nav李{
宽度:8 em;
高度:2 em;
字体大小:25 px;
颜色:橙色;
} 设置文字样式,注意高度是<代码> 120%,<代码>时间> 要高一些:
nav李跨度{
位置:相对;
box-sizing: border-box;
宽度:继承;
高度:120%;
上图:-10%;
background - color: # 333;
边界:2 px固体;
字体类型:无衬线;
首字母:大写;
显示:flex;
对齐项目:中心;
justify-content:中心;
} 将<代码>时间> nav李跨度{
变换:translateX (4 px);
} 用列表项李<代码> 的左边框画出一条竖线:
nav李{
box-sizing: border-box;
border-left: 2 px固体;
} 用列表项的伪元素再画出两条竖线,它们的高度依次降低,至此,按钮左侧一共有3条竖线:
nav李{
位置:相对;
}
nav李::,
nav李::
{
内容:& # 39;& # 39;;
位置:绝对的;
宽度:继承;
border-left: 2 px固体;
z - index: 1;
}
nav李::{之前
高度:80%;
上图:10%;
左:8 px;
}
nav李::{后
高度:60%;
上图:20%;
左:-14 px;
} 将伪元素的2条竖线的颜色逐渐变暗,增加一点层次感:
nav李::{之前
过滤器:亮度(0.8);
}
nav李::{后
过滤器:亮度(0.6);
} 增加鼠标悬停效果,默认状态是按钮遮住3条竖线,当鼠标悬停时,按钮右移,露出3条竖线:
nav李:悬停跨度{
变换:translateX (4 px);
}
李nav跨度{/*变换:translateX (4 px);*/变换:translateX (-16 px);
过渡:0.3秒;
} 因为按钮默认状态的位置是偏左的,为了抵销这个偏移量,让列表项稍向右移:
nav ul {
变换:translateX (16 px);
} 在dom中再增加几个按钮:
& lt; nav>
& lt; ul>
& lt; li> & lt; span> home & lt;/li>
& lt; li> & lt; span> products & lt;/li>
& lt; li> & lt; span> services & lt;/li>
& lt; li> & lt; span> contact & lt;/li>
& lt;/ul>
& lt;/nav> 设置一下按钮的间距:
nav李{
margin-top: 0.8 em;
} 以上是怎么使用纯CSS实现悬停时右移的按钮效果的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
