CSS3 按钮边框动画的实现


Posted in HTML / CSS onNovember 12, 2020

先看效果:

CSS3 按钮边框动画的实现

html

<a href="#">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  Move on
</a>

css3

body {
  margin: 0;
  padding: 0;
  background-color: #035f3c;
}

a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  color: #16f03a;
  padding: 30px 60px;
  font-size: 30px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  /* to delete length of animation lines: */
  overflow: hidden;
}

a:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  bottom: 2px;
  width: 50%;
  background: rgba(255, 255, 255, 0.05);
}

a span:nth-child(1) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #035f3c, #16f03a);
  animation: animate1 2s linear infinite;
  -webkit-animation: animate1 2s linear infinite;
}

@keyframes animate1 {
  0% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
  }
}

a span:nth-child(2) {
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, #035f3c, #16f03a);
  animation: animate2 2s linear infinite;
  -webkit-animation: animate2 2s linear infinite;
  /* add delay to have continuity on effect*/
  animation-delay: 1s;
}

@keyframes animate2 {
  0% {
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
  }
}

a span:nth-child(3) {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to left, #035f3c, #16f03a);
  animation: animate3 2s linear infinite;
  -webkit-animation: animate3 2s linear infinite;
}

@keyframes animate3 {
  0% {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
  }
}

a span:nth-child(4) {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to top, #035f3c, #16f03a);
  animation: animate4 2s linear infinite;
  -webkit-animation: animate4 2s linear infinite;
  /* add delay to have continuity on effect*/
  animation-delay: 1s;
}

@keyframes animate4 {
  0% {
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
  }
}

以上就是CSS3 按钮边框动画的实现的详细内容,更多关于CSS3 按钮边框动画的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
对CSS3选择器的研究(详解)
Sep 16 HTML / CSS
CSS类名支持中文命名的示例
Apr 04 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
css3 filter属性的使用简介
Mar 31 HTML / CSS
CSS3 实现发光边框特效
Nov 11 #HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 #HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 #HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 #HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 #HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 #HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 #HTML / CSS
You might like
PHP 批量删除 sql语句
2009/06/05 PHP
php加密解密实用类分享
2014/01/07 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
详解python的四种内置数据结构
2019/03/19 Python
python设置环境变量的作用和实例
2019/07/09 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
化学实验员岗位职责
2013/12/28 职场文书
书香校园活动方案
2014/02/28 职场文书
委托书范文
2014/04/02 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
2015新年寄语大全
2014/12/08 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
解析Java中的static关键字
2021/06/14 Java/Android
python Django框架快速入门教程(后台管理)
2021/07/21 Python
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技