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

在线预览    源码下载