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

news2024/12/28 17:56:19

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;
}

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

按钮样式

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

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

按钮光效解决方案

解决思路

1. 按钮层在最下面，设定overflow：hidden。

2. 最上层放一个蒙版层，用来遮挡动画层。

3. 在两个层中间放一层动画层，做个圆形在这个层沿着按钮层的轮廓轮廓滚动。这样，露出的部分就是我们看到的流光的效果。

有了思路，我们就开始：

写样式表

先修改一下基本布局：

<button class="base button">花径不曾缘客扫</button>

接下来，我们的按钮样式就着落在这个 button 类上。

.button {   
  background:none;  
  position: relative;
  color: #fff;
  z-index: 0;
  overflow: hidden;
  transition: 300ms;
  -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(0, 0, 0, .2));   
}
.button:before {
  content: '';
  position: absolute;
  top:1px;
  left: 1px;
  border:1px solid #666;
  border-radius: 2rem;
  background: var(--main-bg-color);
  width: calc(100% - 4px);
  height: calc(100% - 4px); 
  z-index: -1;
  transition: 300ms;  
}

写到这里，我们就有了两个层：按钮层（button）和蒙版层（button:before），按钮样子也变成了这样：

接下来，我们要给它增加中间滚动的层：

.moving-element{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 110px;
  height: 110px;    
  border-radius: 2rem;  /* 圆形按钮 */
  background-image: radial-gradient(#fff 40%,transparent 80%);  /* 径向渐变填充，白色到透明 */
  z-index: -2;  
}

这个层要加载按钮标签中：

<button class="base button">
    花径不曾缘客扫
    <span class="moving-element"></span>
</button>

接下来，我们看看这个层是不是出现了：

没错，虽然稍显僵硬，但它还是出现了。我们先看看它现在的位置：

接下来，就是让它动起来。为了方便看到它，我们先把 before层的背景色注释掉。

按钮常态动画

有了按钮的基本样式，接下来就是加动画效果在上面。这个按钮的动画，要用到CSS3关键帧动画。

我在上图中，用红色标注了六个点，这就是我们要改变位置的六个关键帧。首先，我先把这个滚动的层，调整到左上角的红点位置，作为起点。

.moving-element{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 110px;
  height: 110px;    
  border-radius: 2rem;  /* 圆形按钮 */
  background-image: radial-gradient(#fff 40%,transparent 80%);  /* 径向渐变填充，白色到透明 */
  z-index: -2;  
  transform: translate(-45px, -55px);  /* 定位动画第一帧的起点 */
  filter:blur(10px); /* 让渐变填充的圆形光球更顺滑一些 */
}

我们先绑定动画到这个圆形球上，再进行动画的编写和调整。

animation: moveAround 2s linear infinite;

接下来，就开始动手写动画：定义六个关键帧，为了让关键帧过渡平滑，我们需要调整六个点的时间间隔。第一个阶段，是从起点直接向右，水平运动到右侧的圆角的第一个弧形拐点。这个阶段，我们暂时把它定义为40%。然后圆弧间的两段动画各占5%。这样，我们的关键帧时间安排大概如下：

@keyframes moveAround {
  0%{}
  40%{}
  45%{}
  50%{}
  90%{}
  95%{}
  100%{}
}

然后，我们给每个关键帧定义光球的位置。

我们知道光球的运动定位是以它自己的圆心为中心的。所以，我们只要在第一帧把圆心定位在标记的红点上。然后按照时间设计运动路线就行。

这里还有一个问题，为了提高按钮的通用性，我们不能把它的点位写成固定的px，所以，我们要用：left：30%，top:20% 这样的形式，这样即使未来按钮有一定的大小变化，我们的动画可以不做修改（或者仅做少量修改）就可以适用。

接下来，我们来调整圆球的位置：

@keyframes moveAround {
  0%{left:0%;top:0%}
  40%{ left:90%; top:0% }
  45%{}
  50%{}
  90%{}
  95%{}
  100%{}
}

这是第一段动画，把小球从左侧移动到右侧，按钮宽度90%的位置。

看来没有问题，接下来，我们完成剩下各个阶段的动画。

@keyframes moveAround {
  0%{ left:0%;top:0% }
  40%{ left:90%; top:0% }
  45%{ left:110%;top:30% }
  50%{ left:90%;top:100% }
  90%{ left:0%;top:100% }
  95%{ left:-30%;top:30% }
  100%{ left:-0%;top:0% }
}

看起来还有些生硬，我们现在把蒙版层的背景颜色加上，看看效果如何：

好吧，比预想的效果在圆角那里还是稍显生硬，这个就需要在增加关键帧并且调整时间间隔来实现了。在这里，我就不做更细致的调整了。各位看官可以自己动手尝试一下。

接下来，我们要做：

按钮响应动画

.button:hover{
  transition: 300ms;
  color: #ffbf00;  
}
.button:hover:before{
  border:1px solid #664d00;
  transition: 300ms;  
}
.button:hover .moving-element{
  transition: 300ms;
  background-image: radial-gradient(#ffd966 40%,transparent 80%);
}