CSS3中animation实现流光按钮效果

接下来我将详细讲解“CSS3中animation实现流光按钮效果”的完整攻略。

简介

动效在前端开发中扮演着越来越重要的角色。CSS3中的animation属性提供了实现动效的方式，为网站增添了丰富多彩的效果。在很多时候，我们需要为按钮、链接等元素增加动效，以吸引用户的注意力或者提供更加友好的交互体验。本文将介绍如何使用CSS3中的animation属性来实现流光按钮效果。

实现方式

把动画的实现分为两步：

1. 定义CSS样式

通过定义CSS样式，我们可以为按钮增加基本的样式和效果，比如圆角、背景色、边框等。其中，关键是animation属性，通过设定不同的值，实现不同的动效效果。

1. 触发动画

通过触发不同的事件（比如:hover），我们可以使得按钮实现不同的动画效果。

下面是一份简单的实现代码示例：

.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 30px;
  background-color: #f0f;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.btn:hover {
  animation-name: shine;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes shine {
  0% {
    background-color: #808080;
    box-shadow: none;
  }
  50% {
    background-color: #f0f;
    box-shadow: 0 0 20px 10px #f0f;
  }
  100% {
    background-color: #808080;
    box-shadow: none;
  }
}

这里使用了两个关键属性：animation和:hover。其中，animation被设置为无限次数（infinite），同时设有动画名称（pulse和shine）和动画延迟时间（duration）。此外，还定义了动画的具体执行方式（box-shadow、background-color、text-shadow等）。

下面，我来解释一下代码的具体实现方式。

基本样式

首先，我们定义了一个基础按钮样式，如下：

.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 30px;
  background-color: #f0f;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

这里用到了CSS的基础知识：横幅样式的定义方式。同时，通过设置padding、border-radius、text-align、font-weight、cursor等属性，实现了圆角、水平居中、文字加粗等效果。此外，设定了动画名称、动画持续时间和重复次数。

光晕效果

接下来，我们为按钮添加光晕效果。具体实现方法是，在原有基础样式的基础上，定义一个:hover样式。

.btn:hover {
  animation-name: shine;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

这里hover用于在用户将鼠标指针放到按钮上时触发的动效，我们为其设置了动画名称（shine）、动画时间（duration）和动画重复次数（iteration-count）。

此外，在shine动画中，我们将背景色、文本颜色进行变化，同时增加了box-shadow效果。关键代码为：

@keyframes shine {
  0% {
    background-color: #808080;
    box-shadow: none;
  }
  50% {
    background-color: #f0f;
    box-shadow: 0 0 20px 10px #f0f;
  }
  100% {
    background-color: #808080;
    box-shadow: none;
  }
}

这里使用了@keyframes关键词设定了动画的执行顺序，进而设定了执行的效果。

自发性波动

最后，我们为按钮添加一个自发性波动效果，以增加动效的丰富度。具体实现方式为：

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

这里通过animation-name设定了动画的名称，同时设定了动画执行的方式及效果。具体来说，实现了一个呼吸效果：按钮背景由白色变透明。这样，使得按钮看上去更具有动感。

示例说明

这里提供两个实现“流光按钮效果”的示例。

示例1

本示例实现了扫码进入支付页面的样式：

.btn-pay {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 30px;
  background-color: #3CC4DA;
  color: #f0f;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
  ```

这里使用了不同的背景色和文字样式（color），实现了不同的视觉上的展现。同时，用到了animation-duration属性，设置了动画呼吸节奏的调整参数。

### 示例2

本示例实现了登陆页面的查找账户样式：

```css
.btn-find {
  display: inline-block;
  padding: 12px 36px;
  border-radius: 30px;
  background-color: #1976d2;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.btn-find:hover {
  animation-name: shine;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes shine {
  0% {
    background-color: #4c4c4c;
    box-shadow: none;
  }
  50% {
    background-color: #f9a825;
    box-shadow: 0 0 20px 10px #f9a825;
  }
  100% {
    background-color: #4c4c4c;
    box-shadow: none;
  }
}

这里使用了hover样式和不同的背景色、圆角等元素，实现了比较醒目的查找样式。

总结

通过对CSS3中动画的实现方式的介绍，我们了解了如何用animation属性来实现流光效果。通过这样的方式，可以为按钮等网站元素增加更加丰富的动效，为用户提供更友好的交互体验。