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

本是古典何须时尚 2022-10-10 01:30 266阅读 0赞

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

[在线展示][Link 1]

![20210625131926419.gif][]

[代码][Link 2]

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

[Link 1]: https://jackiedyh.github.io/DemoTest/%E6%A1%88%E4%BE%8B%E6%B5%8B%E8%AF%95/%E6%A1%88%E4%BE%8B-css%E8%8F%9C%E5%8D%95%E9%BC%A0%E6%A0%87%E6%95%88%E6%9E%9C.html
[20210625131926419.gif]: /images/20221005/eabffb019cc6418da21c25fbafb43d39.png
[Link 2]: https://codepen.io/jackiedyh/pen/MWmpMoZ