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

标签：动画特效   over   bic   webkit   ica   absolute   san   span   :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从中点向两侧变长

标签：动画特效   over   bic   webkit   ica   absolute   san   span   :hover   

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