奇淫巧技——不可思议CSS光标移动下划线跟随效果

2018-04-04T09:42:15

先放张效果图

 

怎么实现呢?我们第一反应应该就是用js,感觉很麻烦。而今天要介绍的是用css实现这一效果。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
		ul{
			display: flex;
			flex-direction: row;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
		li{
			list-style-type: none;
			cursor: pointer;
			padding: 28px;
			position: relative;
			transition: 0.3s all linear;
			font-size: 24px;
		}
		li::before{
			content: "";
			position: absolute;
			top: 0;
			left: 100%;
			height: 100%;
			width: 0;
			border-bottom: 2px solid #000;
			transition: 0.3s all linear;
		}
		li:hover::before{
			width: 100%;
			top: 0;
			left: 0;
			transition-delay: 0.2s;
		}
		li:hover ~ li::before{
			left: 0
		}
	</style>
</head>
<body>
	<ul>
		<li>效果1</li>
		<li>效果2</li>
		<li>效果3</li>
		<li>效果4</li>
		<li>效果5</li>
	</ul>
</body>
</html>

唯一的小瑕疵是第一个元素不能实现从左到右的变化。

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »
因本文不是用Markdown格式的编辑器书写的,转换的页面可能不符合MIP标准。