哈勃私语本文展示了一种常见的鼠标经过元素，标线由中间向两边展开的效果，鼠标滑上去实现由中间向两边展开的效果，那么如何实现鼠标经过元素，标线由中间向两边展开这种效果呢？
其实原理很简单：
- 上标线的宽度设置为0！高度随意看你自己喜欢（笔记加粗部分）
- 来个动画，时间自己随意定几秒（笔记加粗部分）
- 定义上标线鼠标划过的时候，宽度为100%就完事了（笔记加粗部分）
下面是源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sdgbfgbnhrh</title>
<style type="text/css">
#underline{width:200px;
height:50px;
background:#ddd;
margin:1px;
position:relative;
text-align:center;
line-height:50px;
float:left;}
#underline:after{content: "";
width:0;
height:1px;
background:blue;
position:absolute;
top:100%; left:50%;
transition:all .8s;}
#underline:hover:after{left:0%; width:100%;}
</style>
</head>
<body>
<div id="underline">
fdbhrgngfg
</div>
<div id="underline">
webwdgffbg
</div>
<div id="underline">
mgiorgnfbo
</div>
</body>
</html>
未经允许不得转载：哈勃私语 » 鼠标经过元素，标线由中间向两边展开
本文共708个字 创建时间：2017年9月20日18:24