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 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
会走动的图形html5时钟示例
Apr 27 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 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常用代码
2006/11/23 PHP
php小偷相关截取函数备忘
2010/11/28 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
Python多线程和队列操作实例
2015/06/21 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
Python基于locals返回作用域字典
2020/10/17 Python
艺术爱好者的自我评价分享
2013/10/08 职场文书
现代化办公人员工作的自我评价
2013/10/16 职场文书
理货员的岗位职责
2013/11/23 职场文书
施工员岗位职责
2014/03/16 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
投资入股合作协议书
2014/10/28 职场文书
水电施工员岗位职责
2015/04/11 职场文书
贫困证明怎么写
2015/06/16 职场文书
高三化学教学反思
2016/02/22 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
Python制作表白爱心合集
2022/01/22 Python
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android