纯CSS3按钮边框线条动画特效--底部边框hover从中点向两侧变长

html：

<a href=‘‘ class=‘ui-box bottom-inOutSpread‘>Audio Description</a>

css：

.ui-box {
 ???text-decoration:none;
 ???border:none;
 ???font-family:‘Roboto‘, sans-serif;
 ???font-size:14px;
 ???position:relative;
 ???vertical-align:baseline;
 ???padding:10px
}
.bottom-inOutSpread:before,.bottom-inOutSpread:after,.bottom-inOutSpread>.ui-border-element:before,.bottom-inOutSpread>.ui-border-element:after {
 ???content:‘‘;
 ???position:absolute
}
.bottom-inOutSpread:after {
 ???border-bottom:2px solid #333;
 ???left:51%;
 ???right:51%;
 ???bottom:0px;
 ???-webkit-transition-property:all;
 ???-moz-transition-property:all;
 ???-o-transition-property:all;
 ???transition-property:all;
 ???-webkit-transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);
 ???-moz-transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);
 ???-o-transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);
 ???transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);
 ???-webkit-transition-duration:200ms;
 ???-moz-transition-duration:200ms;
 ???-o-transition-duration:200ms;
 ???transition-duration:200ms;
 ???-webkit-transition-delay:0s;
 ???-moz-transition-delay:0s;
 ???-o-transition-delay:0s;
 ???transition-delay:0s
}
.bottom-inOutSpread:hover:after {
 ???left:0%;
 ???right:0%
}
.bottom-inOutSpread:not(:hover):after {
 ???-webkit-transition-delay:0s;
 ???-moz-transition-delay:0s;
 ???-o-transition-delay:0s;
 ???transition-delay:0s
}

纯CSS3按钮边框线条动画特效--底部边框hover从中点向两侧变长

原文地址：http://www.cnblogs.com/HONGYE1994/p/8012093.html