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属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 HTML / CSS
HTML5 File API改善网页上传功能
Aug 19 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
Feb 20 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 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 radio 单选框获取与保持值的实现代码
2010/05/15 PHP
PHP模块化安装教程
2016/06/01 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
基于Jquery的温度计动画效果
2010/06/18 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
Python列表计数及插入实例
2014/12/17 Python
Python 文件处理注意事项总结
2017/04/10 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
性能服装:HYLETE
2018/08/14 全球购物
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
化工专业推荐信范文
2013/11/28 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
党员带头倡议书
2015/04/29 职场文书
员工手册董事长致辞
2015/07/29 职场文书
Python Matplotlib绘制动画的代码详解
2022/05/30 Python