css3实现鼠标经过元素，上标线由中间向两边展开
Posted UI设计自学平台
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3实现鼠标经过元素，上标线由中间向两边展开相关的知识，希望对你有一定的参考价值。
css3的新增功能非常棒！我们将逐一的给大家展示其中的奥妙！
本文展示了一种常见的上标线展开动画效果
先来看看示例：
看起来好像很难吧，要控制一个动画
首先没有上标线
鼠标划过去之后
上标线从中间开始向两边展开动画
其实原理很简单：
上标线的宽度设置为0！高度随意看你自己喜欢（笔记加粗部分）
来个动画，时间自己随意定几秒（笔记加粗部分）
定义上标线鼠标划过的时候，宽度为100%就完事了（笔记加粗部分）
下面是给大家准备好的笔记和源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移入上标线展开动画</title>
<style type="text/css">
#underline{width:200px;
height:50px;
background:#ddd;
margin:1px;
position:relative;
font-family:"微软雅黑";
color:#333333;
text-align:center;
line-height:50px;
float:left;}
#underline:after{content: "";
width:0;
height:1px;
background:blue;
position:absolute;
top:0%; left:50%;
transition:all .8s;}
#underline:hover:after{ left:0%; width:100%;}
</style>
</head>
<body>
<div id="underline">
51rgb在线教育
</div>
<div id="underline">
web前端开发
</div>
<div id="underline">
万晨曦老师授课
</div>
</body>
</html>
觉得本文对你有帮助？请分享给更多人
关注「网页设计自学平台」快速提升技能
福利！免费领取腾讯高级讲师网页设计教程
每天学一点·小白快速进阶大神
设计｜DW教程｜AE教程｜前端资讯
微信ID：WEB_wysj
▲长按二维码关注
以上是关于css3实现鼠标经过元素，上标线由中间向两边展开的主要内容，如果未能解决你的问题，请参考以下文章