CSS技巧专栏：一日一例 7 - 纯CSS实现炫光边框按钮特效

CSS技巧专栏：一日一例 7 - 纯CSS实现炫光边框按钮特效

本例效果图

案例分析

相信你可能已经在网络见过类似这样的流光的按钮，在羡慕别人做的按钮这么酷的时候，你有没有扒一下它的源代码的冲动？或者你当时有点冲动，却转眼忘却了。今天，刚巧，你又看到它了，今天跟我一起扒一扒它的源代码。

左边按钮分析：

1. 圆角按钮的光线效果，这个稍微费劲些。难点：动画层的路径移动

2. 倒影

特此说明

本专题专注于讲解如何使用CSS制作按钮特效。前置的准备工作和按钮的基本样式，都在本专栏第一篇文章中又详细说明。自本专栏第四篇文章起，本专栏都将直接跳过前面的内容，不再重复复制，需要了解按钮基础样式的同学，请移步：《CSS技巧 - 一日一例 （1）：会讨好的热情按钮》。

按钮布局

<div class="container">
    <button class="base ">蓬门今始为君开</button>
</div>   

基本样式

.base{
  position: relative;   
  padding: 1rem 3rem; /* 用 padding 撑起按钮的宽度和高度 ，并确保了按钮文字水平方向居中 */
  font-family: "微软雅黑", sans-serif;
  font-size: 1.5rem;  
  line-height: 1.5rem; /* 行高和字号大小相等，可以实现按钮文字在按钮内垂直居中 */ 
  font-weight:700;
  color: var(--color);  /* 文字颜色为预定义的前景色 */
  cursor: pointer;   /* 鼠标移动到按钮上时候的形状：手型 */
  user-select: none;  /* 让用户不能选择按钮上的文字 */
  white-space: nowrap; /* 避免英文单词间的空格导致文字换行 */
  border-radius: 2rem; 
  text-decoration: none; 
  text-transform:uppercase; /* 字母自动修正为大写 */
  transition: all .5s; /* 按钮响应动画效果的持续时间 */
  margin: 1.5rem 2rem;
}

对的，完成上面两步，咱们的按钮基本样式就这样了。接下来就是实现按钮的美化了。

按钮样式

如果是做直角的流光效果，相对比较容易。做四条颜色渐变的线，分别四个动画依次动起来就可以实现了。但要实现圆角的光效，做直线是不行的。那么这个就需要其他方法了。

怎么解决这个问题呢？我用一张图来表达一下这个动画的基本解决思路：