纯CSS3实现圆圈动态发光特效动画的示例代码

下面是关于纯CSS3实现圆圈动态发光特效动画的完整攻略：

1. 简介

这是一个通过纯CSS3实现圆圈动态发光特效动画的示例代码，利用了CSS3动画、过渡等特性，实现了圆圈发光和动态旋转的效果。

2. 示例代码

下面是示例代码的HTML和CSS部分：

// HTML部分
<div class="circle"></div>

// CSS部分
.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 40px #fff;
  animation: circle 3s linear infinite;
}

@keyframes circle {
  0% {
    transform: rotate(0deg) scale(1);
    box-shadow: 0 0 40px #fff;
  }
  25% {
    transform: rotate(90deg) scale(1.2);
    box-shadow: 0 0 80px rgba(255, 255, 255, 0.8);
  }
  50% {
    transform: rotate(180deg) scale(1);
    box-shadow: 0 0 40px #fff;
  }
  75% {
    transform: rotate(270deg) scale(1.2);
    box-shadow: 0 0 80px rgba(255, 255, 255, 0.8);
  }
  100% {
    transform: rotate(360deg) scale(1);
    box-shadow: 0 0 40px #fff;
  }
}

3. 代码解析

上述代码中，主要运用了以下CSS特性：

border-radius ：圆角边框，用于实现圆形的效果。
background-color ：设定圆圈的背景色为白色。
box-shadow ：设置发光效果。在0度角度时，box-shadow为40px。在90和270度角度时，box-shadow的颜色为rgba(255, 255, 255, 0.8)，大小为80px；在其他角度时，box-shadow的颜色为白色，大小为40px。
animation ：定义了一个名为circle的动画，实现了圆圈在3s内按照指定程度旋转，并且不断重复执行。
@keyframes circle ：是circle动画的关键帧，描述了每个时间点下的CSS属性值。例如，在25%处，将圆圈旋转90度并放大1.2倍，在90和270度角度时发光颜色变为rgba(255, 255, 255, 0.8)且圆圈放大80px等。

具体实现可参见上述代码。

4. 示例说明

示例1

在文本框中输入以下代码，并单击“运行”按钮，即可在预览窗口中预览效果。

<div class="circle"></div>

<style>
.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 40px #fff;
  animation: circle 3s linear infinite;
}

@keyframes circle {
  0% {
    transform: rotate(0deg) scale(1);
    box-shadow: 0 0 40px #fff;
  }
  25% {
    transform: rotate(90deg) scale(1.2);
    box-shadow: 0 0 80px rgba(255, 255, 255, 0.8);
  }
  50% {
    transform: rotate(180deg) scale(1);
    box-shadow: 0 0 40px #fff;
  }
  75% {
    transform: rotate(270deg) scale(1.2);
    box-shadow: 0 0 80px rgba(255, 255, 255, 0.8);
  }
  100% {
    transform: rotate(360deg) scale(1);
    box-shadow: 0 0 40px #fff;
  }
}
</style>