常见css下划线动画集合

最新推荐文章于 2024-04-22 17:46:17 发布

置顶子也

最新推荐文章于 2024-04-22 17:46:17 发布

阅读量5.6k

点赞数 9

分类专栏：前端篇 css animation 文章标签： css动画下划线动画

本文链接：https://blog.csdn.net/feng_zi_ye/article/details/89390260

版权

前端篇同时被 3 个专栏收录

5 篇文章 1 订阅

订阅专栏

animation

2 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

引言：

导航栏下划线动画在网页设计中是非常常见的交互，下面将介绍几种非常常见，非常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疯子也

子也

关注

9
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
常见css下划线动画集合

引言：导航栏下划线动画在网页设计中是非常常见的交互，下面将介绍几种非常常见，非常nice的动画特效，废话不多说直接上演示和代码。一、效果图：二、源码如下：<body> <p>样式1</p> <ul id="demo1"> <li>首页</li> <li>产品<...
复制链接

扫一扫