animated-border.css是一款纯CSS3按钮边框线条动画特效。该CSS3按钮边框线条动画特效提供了40多种炫酷的边框线条动画供你选择使用。
安装
可以通过npm来安装该CSS3按钮边框线条动画特效。
npm install pure-css3-animated-border --save
使用方法
在页面中引入animated-border.css文件。
<link rel="stylesheet" href="css/animated-border.css">
HTML结构
使用该CSS3按钮边框线条动画特效的按钮的基本HTML结构如下：
<a href="#" class="ui-box bottom-leftToRight">
边框动画按钮
</a>
使用时只需要添加相应的class既可。可供使用的CSS3按钮边框线条动画特效的class类有：
- .ui-box .topBottom-leftRightCorner
- .ui-box .topBottom-rightLeftCorner
- .ui-box .forwardBorderTrain
- .ui-box .backwardBorderTrain
- .ui-box .border-inOutSpread
- .ui-box .slideOpposite
- .ui-box .top-leftToRight
- .ui-box .right-topToBottom
- .ui-box .bottom-rightToLeft
- .ui-box .left-bottomToTop
- .ui-box .top-rightToLeft
- .ui-box .right-bottomToTop
- .ui-box .bottom-leftToRight
- .ui-box .left-topToBottom
- .ui-box .top-inOutSpread
- .ui-box .right-inOutSpread
- .ui-box .bottom-inOutSpread
- .ui-box .left-inOutSpread
- .ui-box .top-slideOpposite
- .ui-box .right-slideOpposite
- .ui-box .bottom-slideOpposite
- .ui-box .left-slideOpposite
- .ui-box .top-leftStart
- .ui-box .top-rightStart
- .ui-box .bottom-rightStart
- .ui-box .bottom-leftStart
- .ui-box .top-leftStart-backward
- .ui-box .top-rightStart-backward
- .ui-box .bottom-rightStart-backward
- .ui-box .bottom-leftStart-backward
- .ui-box .top-leftStart-burst
- .ui-box .top-rightStart-burst
- .ui-box .bottom-rightStart-burst
- .ui-box .bottom-leftStart-burst
- .ui-box .top-leftStart-burst-backward
- .ui-box .top-rightStart-burst-backward
- .ui-box .bottom-rightStart-burst-backward
- .ui-box .bottom-leftStart-burst-backward
- .ui-box .top-stay
- .ui-box .right-stay
- .ui-box .bottom-stay
- .ui-box .left-stay
该CSS3按钮边框线条动画特效的gihub地址为：https://github.com/code-fx/Pure-CSS3-Animated-Border
