纯CSS3按钮边框线条动画特效

当前位置:主页 > CSS3库 > CSS3动画 > 纯CSS3按钮边框线条动画特效
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
纯CSS3按钮边框线条动画特效
分享:

    插件介绍

    animated-border.css是一款纯CSS3按钮边框线条动画特效。该CSS3按钮边框线条动画特效提供了40多种炫酷的边框线条动画供你选择使用。

    浏览器兼容性

    浏览器兼容性
    时间:2017-10-31
    阅读:
简要教程

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

网友评论