css 圆形发光动画

以下是一种使用CSS3 @keyframes属性制作圆形发光动画的方法：

/* 创建一个圆形div */
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: black;
  position: relative;
}

/* 创建一个圆形的伪元素 */
.circle::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
  box-shadow: 0 0 10px 10px white;
  opacity: 0;
  animation: pulse 2s linear infinite;
}

/* 创建一个动画 */
@keyframes pulse {
  0% {
    opacity: 0;
    box-shadow: 0 0 10px 10px white;
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 20px 20px white;
  }
  100% {
    opacity: 0;
    box-shadow: 0 0 10px 10px white;
  }
}

在上面的代码中，我们首先创建了一个圆形的div，然后使用伪元素创建了一个圆形的发光效果。我们使用@keyframes属性创建了一个名为“pulse”的动画，该动画会使圆形的发光效果在2秒内逐渐变亮和变暗。

你可以将上面的代码复制到HTML文件中并查看效果。