css导航动画-光标移动下划线跟随

作者：Jasmine - 2020年12月25日

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		ul {
		  display: flex;
		  position: absolute;
		  width: 100%;
		  top: 20px;
		  left: 50%;
		  transform: translate(-50%, -50%);
		}
		
		li {
		  list-style: none;
		  position: relative;
		  padding: 20px;
		  font-size: 24px;
		  color: #222;
		  line-height: 1;
		  transition: 0.2s all linear;
		  cursor: pointer;
		}
		
		li::before {
		    content: "";
		    position: absolute;
		    top: 0;
		    left: 100%;
		    width: 0;
		    height: 100%;
		    border-bottom: 2px solid #222;
		    transition: 0.2s all linear;
		}
		
		li:hover::before {
		  width: 100%;
		  left: 0;
		  transition-delay: 0.1s;
		  z-index: -1;
		}
		
		li:hover ~ li::before {
		  left: 0;
		}
		
		li:active {
		  background: #222;
		  color: #fff;
		}

	</style>
</head>
<body>
	<ul>
	   <li>Home</li>
	   <li>About</li>
	   <li>Introduction</li>
	  <li>Certificate</li>
	  <li>Enquiry</li>
	</ul>
</body>
</html>

效果:

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/716

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！