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伪类选择器:nth-child()
Apr 02 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 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
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
js实现消息滚动效果
2017/01/18 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
在双python下设置python3为默认的方法
2018/10/31 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
Python requests模块cookie实例解析
2020/04/14 Python
Python调用JavaScript代码的方法
2020/10/27 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
语文教育专业应届生求职信
2013/11/23 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
关爱残疾人标语
2014/06/25 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
2019银行竞聘书
2019/06/21 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
Python代码实现双链表
2022/05/25 Python