主要用到的知识点

1. CSS 过渡动画：transition，可以看到下划线的动画效果。

2. 伪标签：用来制作下划线。

3. 变形：用来实现下划线的长短变化--注意，这里不是 width 变化，而是 scaleX 变化。

HTML

<nav class="pageNav"><ul><li><a href="#">首页</a></li><li><a href="#">产品展示</a></li><li><a href="#">目标连接</a></li><li><a href="#">2022感恩有你</a></li><li><a href="#">新年快乐</a></li></ul>
</nav>

CSS

*{margin: 0;padding: 0;
}
ul,li,ol{list-style: none;
}
a{text-decoration: none;
}
.pageNav{background: #0078ff;
}
.pageNav a{display: block;position: relative;padding-left: 20px;padding-right: 20px;color: #fff;font-size: 16px;line-height: 50px;
}
.pageNav>ul{display: flex;
}
.pageNav a::after{content: "";height: 4px;overflow: hidden;display: block;left:0;bottom:0;position: absolute;width: 100%;background: #ff0;transform: scaleX(0);transition:all 0.5s;
}
.pageNav a:hover::after{transform: scaleX(1);
}

简单而实用~！！

CSS3技巧30：简单而实用的CSS导航下划线动画效果相关推荐

css3 背景大小background-size属性实现鼠标移入文字下划线动画效果
最近看到一个页面有一个很有趣的动画,就是鼠标移入后,在对应的文字下方会出现下划线的动画效果,当鼠标移除后,下划线动画会消失,于是想了下该如何去实现这个动画效果. 第一个想法是想通过with来做,但是这 ...
css3实现下划线动画效果
<!DOCTYPE> <html> <head> <meta charset="utf-8"/> <title ...
导航菜单中常用的css下划线动画效果-案例
导航栏下划线动画在网页设计中是非常常见的交互在线展示代码 <!DOCTYPE html> <html><head><meta charset=" ...
02 css实现文字下划线动画效果
实现文字下划线从中间向两端延伸的动画效果,主要是通过css的transform和transition属性来实现,下面直接粘贴代码和效果图: <!DOCTYPE html> <html ...
HTML5导航下划线,CSS导航下划线实现
在做页面的时候发现页面导航栏有一个很棒的效果.具体的效果就是,当鼠标移到一个导航栏时,导航栏下方会缓慢出现一条线. 当用ui内联的方式实现普通的导航后,在html中的li添加一个class用来控制下划 ...
css下拉菜单出现下划线,简单带下划线跟随效果的CSS3下拉菜单特效
简要教程这是一款使用纯CSS3制作的带下划线跟随效果的下拉菜单特效.该下拉菜单通过CSS3 transform和transition来制作下划线跟随效果和下拉菜单效果. 使用方法 HTML结构该下 ...
纯css和html光芒特效,科技常识：纯CSS3实现给头像加个光芒四射且旋转的背景动画效果...
今天小编跟大家讲解下有关纯CSS3实现给头像加个光芒四射且旋转的背景动画效果 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关纯CSS3实现给头像加个光芒四射且旋转的背景动画效果的相关资料 ...
css选择器下划线设置,css中怎么设置字体下划线
css中设置字体下划线的方法:1.使用"text-decoration:underline;"设置下划线样式:2.通过"border-bottom"属性设置下划 ...
html字体下划线下移,CSS下划线与文字间距距离设置(CSS文字下划线距离设置)
CSS设置下划线与文字间距距离(CSS文字下划线距离设置) css下划线与文字上下距离设置,文字字体下划线样式技巧篇,如何改变文字与下划线距离间距?这里CSS5为大家介绍通过下边框border-bot ...

CSS3技巧30：简单而实用的CSS导航下划线动画效果

主要用到的知识点

HTML

CSS

CSS3技巧30：简单而实用的CSS导航下划线动画效果相关推荐

最新文章

热门文章