奇妙的CSS3—导航栏下划线跟随效果
先来看一下效果:
1、基本效果就是这样的 ,鼠标悬停,下划线划入。鼠标离开,下划线划出
2、下划线的划入是有方向的,从左侧划入悬停,下划线由左向右伸长。从右侧划入,下划线由又往左伸长
实现思路
1、导航是由ul+li组成的,在这里显然li
的宽度是不固定的。所以,我们可能需要从 li
本身的宽度上做文章,
既然每个 li
的宽度不一定,那么它对应的下划线的长度,肯定是是要和他本身相适应的。所以 ,我们可以在li hover 的时候,借助伪元素。将下划线作用到每个
li
的伪元素身上。
2、怎么样实现一个过渡效果的动画呢?我们可以利用相对定位+决定定位,当li hover 的时候,下划线要从一侧运动展开。
所以,我们利用绝对定位,将 li
的伪元素的宽度设置为0,在 hover 的时候,宽度从 width: 0 -> width: 100%
,OK 完美
3、左移左出,右移右出的问题怎么解决
如何让线条跟随光标的移动动作,实现当从导航的左侧 li
移向右侧 li
,下划线从左往右移动。同理,当从导航的右侧 li
移向左侧 li
,下划线从右往左移动
我们迫切需要一种方法,能够不改变当前 hover 的 li
的下划线移动方式却能改变它下一个 li
的下划线的移动方式(好绕口)。
这里我们可以借助 ~
选择符,完成这个艰难的使命,对于当前 hover 的 li
,其对应伪元素的下划线的定位是 left: 100%
,而对于 li:hover ~ li::before
,它们的定位是 left: 0
示例代码:
1、结构html部分:
<ul>
<li>奇妙的CSS</li>
<li>导航栏</li>
<li>前端</li>
<li>CSS3</li>
<li>Javascript</li>
</ul>
2、css部分
ul {
display: flex;
position: absolute;
width: 800px;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
li {
position: relative;
padding: 20px;
font-size: 24px;
color: #000;
line-height:;
transition: 0.2s all linear;
cursor: pointer;
list-style: none;
} li::before {
content: "";
position: absolute;
top:;
left: 100%;
width:;
height: 100%;
border-bottom: 2px solid #000;
transition: 0.2s all linear;
} li:hover::before {
width: 100%;
top:;
left:;
transition-delay: 0.1s;
border-bottom-color: #000;
z-index: -1;
}
li:hover ~ li::before {
left:;
} li:active {
background: #000;
color: #fff;
}
这就是css3之魅力
奇妙的CSS3—导航栏下划线跟随效果的更多相关文章
- 不可思议的纯CSS导航栏下划线跟随效果
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- css实现导航栏下划线跟随效果
话不多说先附上代码 <style> ul li { float: left; display: block; list-style: none; margin-left: 20px; bo ...
- 纯CSS导航栏下划线跟随效果
参考文章 <ul> <li>111</li> <li>2222</li> <li>3333333</li> < ...
- CSSTab栏下划线跟随效果
神奇的 ~ 选择符 对于当前 hover 的 li ,其对应伪元素的下划线的定位是 left: 100%,而对于 li:hover ~ li::before,它们的定位是 left: 0. ul li ...
- [HTML/CSS]导航栏的下划线跟随效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯css导航栏下划线
.nav-underline > *{/* 指定容器,里面可以是li.span等多样化的元素 */ display: inline-block; margin: -3px; padding: 1 ...
- 纯css导航下划线跟随效果【转载】
css: ul { display: flex; position: absolute; width: 800px; top: 50%; left: 50%; transform: translate ...
- tab 切换下划线跟随实现
HTML 结构如下: <ul> <li class="active">不可思议的CSS</li> <li>导航栏</li> ...
- day24—JavaScript实现导航栏底部引线跟随移动
转行学开发,代码100天——2018-04-09 前面的学习笔记中记录过,利用:before和:after实现导航栏鼠标移动跟随效果,今天通过JavaScript代码实现同样的效果,以作对比. < ...
随机推荐
- MyBatis缓存通俗易懂
1.1 mybatis缓存介绍 如下图,是mybatis一级缓存和二级缓存的区别图解: Mybatis一级缓存的作用域是同一个SqlSession,在同一个sqlSession中两次执行相同的 ...
- CakePHP调用model类和foreach循环
1. 引入Model类 2.调用model类(Guarantee)下的getCity()方法 3.写sql语句 并返回获得值 4.foreach循环取得的城市
- 零基础学python习题 - 进入python的世界
1. python拥有以下特性:面向对象的特性.动态性.内置的数据结构.简单性.健壮性.跨平台性.可扩展性.强类型语言.应用广泛 2. python 需要 编译 3. 以下不属于python内置数据 ...
- Angular中引入Bootstrap部分样式失效以及Jquery的$无法识别
大多数同学在模仿慕课网的时候可能会遇到引入bootstrap和jquery样式部分失效以及$符号报错,这里为大家提供正确的解决方案. 可能大家在引入试过col-md之后觉得bootstrap是ok的, ...
- CodeChef SADPAIRS:Chef and Sad Pairs
vjudge 首先显然要建立圆方树 对于每一种点建立虚树,考虑这一种点贡献,对于虚树上已经有的点就直接算 否则对虚树上的一条边 \((u, v)\),\(u\) 为父亲,假设上面连通块大小为 \(x\ ...
- [转]运用@media实现网页自适应中的几个关键分辨率
转自百度经验:http://jingyan.baidu.com/article/6f2f55a1ab36c3b5b83e6c46.html 经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用 ...
- RHEL5.X 重启网卡出现./network-functions: line 78: .: ifcfg-eth0: file not found
错误信息: 红帽RHEL5.5系统,重启网卡报错 [root@localhost network-scripts]# service network restart Shutting down int ...
- 【VS2012】F5不能自动编译新修改
VS2012正常使用时,如果文件有修改,按F5运行时,会自动对修改的文件进行重新编译.今天遇到的情况却并没有.度娘了下,网上有相同的问题,解决办法是“工具->选项->项目和解决方案-> ...
- Pig集群安装
1.安装hadoop 这个之前已经写过 2.下载Pig,解压 3.保证Java和Hadoop已经在/etc/profile中配置 4.配置Pig安装目录 export PIG_INSTALL=/hom ...
- Android知识点滴
今天,把新作的布局状态魅族机上进行测试 发现了一个BUG,造成闪退. 看了下log,一个布局造成的. 开始分析这个布局造成这个问题的原因. 开始艰难的调试过程. 代码注释大法,发现这个问题是一个tex ...