导航菜单中常用的css下划线动画效果-案例

导航栏下划线动画在网页设计中是非常常见的交互

在线展示

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css菜单效果</title><style type="text/css">p {text-align: center;margin: 40px 0 10px 0;}ul {padding: 0;width: 400px;height: 45px;margin: auto;list-style: none;background-color: rgb(0, 0, 0, 0.3);display: flex;}li {flex: 1;height: 100%;display: flex;align-items: center;justify-content: center;position: relative;}/***************样式1   *********/#demo1 li:before {content: '';position: absolute;width: 80%;left: 10%;bottom: 10px;height: 5px;background-color: coral;opacity: 0;}#demo1 li:hover:before {bottom: 0;opacity: 1;transition: bottom 0.3s, opacity 0.3s 0.1s;}/***************样式2   *********/#demo2 li:before {content: '';position: absolute;width: 0;left: 50%;bottom: 0;height: 5px;background-color: coral;}#demo2 li:hover:before {width: 80%;left: 10%;transition: all 0.5s;}/***************样式3   *********/#demo3 li:before {content: '';position: absolute;width: 0;left: 100%;bottom: 0;height: 5px;background-color: coral;}#demo3 li:hover:before {width: 80%;left: 10%;transition: all 0.5s;}#demo3 li:hover~li:before {left: 0;}/***************样式4   *********/#demo4 li:before {content: '';position: absolute;width: 0;left: 0;bottom: 0;height: 5px;background-color: coral;}#demo4 li:after {content: '';position: absolute;width: 0;right: 0;bottom: 0;height: 5px;background-color: coral;}#demo4 li:hover:before {width: 50%;transition: all 0.3s ease-in-out;}#demo4 li:hover:after {width: 50%;transition: all 0.3s ease-in-out;}</style></head><body><p>样式1</p><ul id="demo1"><li>首页</li><li>产品</li><li>服务</li><li>关于</li></ul><p>样式2</p><ul id="demo2"><li>首页</li><li>产品</li><li>服务</li><li>关于</li></ul><p>样式3</p><ul id="demo3"><li>首页</li><li>产品</li><li>服务</li><li>关于</li></ul><p>样式4</p><ul id="demo4"><li>首页</li><li>产品</li><li>服务</li><li>关于</li></ul></body>
</html>

导航菜单中常用的css下划线动画效果-案例相关推荐

CSS3技巧30：简单而实用的CSS导航下划线动画效果
2021 结束了迎来了 2022 回望这一年,收获了不少,也失去了很多. -------------------------------------------------------------- ...
php超链接鼠标滑动加下划线,打造与众不同的鼠标滑过超链接下划线动画效果
众所周知,超链接元素在默认情况下鼠标滑过时会出现一条下划线.默认的超链接下划线动画十分的生硬,我们可以通过一些简单的处理,来制作出带平滑过渡效果的超链接下划线动画效果. 先来体验一下这个超链接动画的效 ...
常见css下划线动画集合
引言: 导航栏下划线动画在网页设计中是非常常见的交互,下面将介绍几种非常常见,非常nice的动画特效,废话不多说直接上演示和代码. 一.效果图: 二.源码如下: <body><p& ...
css3实现下划线动画效果
<!DOCTYPE> <html> <head> <meta charset="utf-8"/> <title ...
css3 背景大小background-size属性实现鼠标移入文字下划线动画效果
最近看到一个页面有一个很有趣的动画,就是鼠标移入后,在对应的文字下方会出现下划线的动画效果,当鼠标移除后,下划线动画会消失,于是想了下该如何去实现这个动画效果. 第一个想法是想通过with来做,但是这 ...
css导航栏选中是有移动下划线的效果
技术不行,拿百度前端学院题目练习,其中遇到一个导航栏,每当选中一个选项,下面出现一个下划线标注.我本来想直接省掉这个功能,后来觉得这样学习估计什么都学不到.后来思考和查阅,记录如下.大概是这么个效果: ...
02 css实现文字下划线动画效果
实现文字下划线从中间向两端延伸的动画效果,主要是通过css的transform和transition属性来实现,下面直接粘贴代码和效果图: <!DOCTYPE html> <html ...
html中怎么让div向左移动,如何更改CSS下划线过渡的方向,并使其从右向左移动？...
我在互联网上发现了此CSS代码,它创建了下划线动画效果,我需要将其反转为从右到左而不是从左到右. .nav-item a { display: inline-block !important; &am ...
css下拉菜单出现下划线,简单带下划线跟随效果的CSS3下拉菜单特效
简要教程这是一款使用纯CSS3制作的带下划线跟随效果的下拉菜单特效.该下拉菜单通过CSS3 transform和transition来制作下划线跟随效果和下拉菜单效果. 使用方法 HTML结构该下 ...

导航菜单中常用的css下划线动画效果-案例

导航菜单中常用的css下划线动画效果-案例相关推荐

最新文章

热门文章