常见css下划线动画集合

引言：

导航栏下划线动画在网页设计中是非常常见的交互，下面将介绍几种非常常见，非常nice的动画特效，废话不多说直接上演示和代码。

一、效果图：

二、源码如下：

<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><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>

有些细节可能处理的不够优化，大致思路是这样的。希望对您有所微薄的帮助，也欢迎大家相互交流。

向上的路并不拥挤，而大多数人选择了安逸——it疯子也

常见css下划线动画集合相关推荐

导航菜单中常用的css下划线动画效果-案例
导航栏下划线动画在网页设计中是非常常见的交互在线展示代码 <!DOCTYPE html> <html><head><meta charset=" ...
CSS3技巧30：简单而实用的CSS导航下划线动画效果
2021 结束了迎来了 2022 回望这一年,收获了不少,也失去了很多. -------------------------------------------------------------- ...
纯CSS下划线出现动画
一.效果二.代码 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
div css 下划线text-decoration
CSS 下划线,div css下划线目录 html原始下划线标签u A伪类超链接下划线鼠标经过出现下划线对对象的下划线接下来,我们来介绍通过css样式对文字.区域设置下划线样式--css下划线 ...
html中怎么让div向左移动,如何更改CSS下划线过渡的方向,并使其从右向左移动？...
我在互联网上发现了此CSS代码,它创建了下划线动画效果,我需要将其反转为从右到左而不是从左到右. .nav-item a { display: inline-block !important; &am ...
html字体下划线下移,CSS下划线与文字间距距离设置(CSS文字下划线距离设置)
CSS设置下划线与文字间距距离(CSS文字下划线距离设置) css下划线与文字上下距离设置,文字字体下划线样式技巧篇,如何改变文字与下划线距离间距?这里CSS5为大家介绍通过下边框border-bot ...
css中字体下划线样式,css下划线浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
css3实现下划线动画效果
<!DOCTYPE> <html> <head> <meta charset="utf-8"/> <title ...
css3 背景大小background-size属性实现鼠标移入文字下划线动画效果
最近看到一个页面有一个很有趣的动画,就是鼠标移入后,在对应的文字下方会出现下划线的动画效果,当鼠标移除后,下划线动画会消失,于是想了下该如何去实现这个动画效果. 第一个想法是想通过with来做,但是这 ...

常见css下划线动画集合

常见css下划线动画集合相关推荐

最新文章

热门文章