今天分享下用css3 的transition属性做的简易小demo,虽然简单，但用在一些官网类的项目中还是很实用滴哦~~~
transition属性有：
| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。（必须） |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
直接上代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3鼠标悬停边框线条动画按钮DEMO演示</title>
<style>
body{background:#F2F2F2}
.btn{
margin-top: 20px;
position:relative;
left:50%;
margin-left:-40px;
display: inline-block;
width:80px;
heigth:40px;
line-height: 40px;
border:none;
background:#0f0f0f;
text-align: center;
color:#fff;
opacity: 0.75;
}
span.line{
display: inline-block;
background:red;
position: absolute;
bottom: 0px;
z-index: 100;
left: 0;
width:0px;
height:3px;
transition:width 300ms ease-out;
-webkit-transition:width 300ms ease-out;
-o-transition: width 300ms ease-out;
-moz-transition: width 300ms ease-out;
}
.btn:hover{
opacity: 1;
transition:opacity 500ms linear;
}
.btn:hover span{
width:80px;
transition:width 300ms ease-in;
-webkit-transition:width 300ms ease-in;
-o-transition:width 300ms ease-in;
-moz-transition:width 300ms ease-in;
}
</style>
</head>
<body>
<div class="button_box">
<a class="btn"></span>按钮<span class="line lineR"></span></a>
</div>
</body>
</html>上传不了动图，只能上代码了，直接复制下来看效果吧！