纯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>

示例2

可以通过修改CSS属性，调整圆圈的大小、颜色、旋转等效果。例如，在上述示例中，您可以修改以下属性：

• width 和 height ：用于调整圆圈的大小。

• border-radius ：调整圆角半径，改变圆圈外形。

• background-color ：改变圆圈的背景色。

• animation ：修改动画持续时间及动画类型，实现不同的效果。

• @keyframes circle ：调整每个关键帧的CSS属性值，从而改变圆圈的旋转、大小、发光颜色等效果。

修改样式后，刷新预览窗口即可查看效果。

总之，这是一个通过CSS3动画实现的令人印象深刻的发光旋转动画，您可以根据自己的需求进行修改和应用。