简要教程

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类有：

o .ui-box .topBottom-leftRightCorner

o .ui-box .topBottom-rightLeftCorner

o .ui-box .forwardBorderTrain

o .ui-box .backwardBorderTrain

o .ui-box .border-inOutSpread

o .ui-box .slideOpposite

o .ui-box .top-leftToRight

o .ui-box .right-topToBottom

o .ui-box .bottom-rightToLeft

o .ui-box .left-bottomToTop

o .ui-box .top-rightToLeft

o .ui-box .right-bottomToTop

o .ui-box .bottom-leftToRight

o .ui-box .left-topToBottom

o .ui-box .top-inOutSpread

o .ui-box .right-inOutSpread

o .ui-box .bottom-inOutSpread

o .ui-box .left-inOutSpread

o .ui-box .top-slideOpposite

o .ui-box .right-slideOpposite

o .ui-box .bottom-slideOpposite

o .ui-box .left-slideOpposite

o .ui-box .top-leftStart

o .ui-box .top-rightStart

o .ui-box .bottom-rightStart

o .ui-box .bottom-leftStart

o .ui-box .top-leftStart-backward

o .ui-box .top-rightStart-backward

o .ui-box .bottom-rightStart-backward

o .ui-box .bottom-leftStart-backward

o .ui-box .top-leftStart-burst

o .ui-box .top-rightStart-burst

o .ui-box .bottom-rightStart-burst

o .ui-box .bottom-leftStart-burst

o .ui-box .top-leftStart-burst-backward

o .ui-box .top-rightStart-burst-backward

o .ui-box .bottom-rightStart-burst-backward

o .ui-box .bottom-leftStart-burst-backward

o .ui-box .top-stay

o .ui-box .right-stay

o .ui-box .bottom-stay

o .ui-box .left-stay

本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端HTML5/CSS3频道！