使用 CSS 实现具有发光效果的旋转球动画

本文将介绍如何使用 CSS 实现具有发光效果的旋转球动画。这种动画效果可以用于网站的加载动画、背景图案等。

实现方式

我们将通过以下 CSS 属性来实现这种动画效果：

• transform: 用于对元素进行旋转、缩放、移动等变形操作。
• animation: 定义动画。
• box-shadow: 定义元素的阴影。

代码实现

下面是具有发光效果的旋转球动画的代码片段：

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  animation: rotate 2s linear infinite;
}

.ball:before,
.ball:after {
  content: "";
  width: inherit;
  height: inherit;
  border-radius: inherit;
  position: absolute;
}

.ball:before {
  top: 0;
  left: 0;
  box-shadow: 0 0 20px #fff, 0 0 40px #fff, 0 0 60px #fff, 0 0 80px #0ff, 0 0 100px #0ff, 0 0 120px #0ff, 0 0 140px #0ff;
  z-index: -1;
}

.ball:after {
  top: 15px;
  left: 15px;
  box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #0ff, 0 0 25px #0ff, 0 0 30px #0ff, 0 0 35px #0ff;
  z-index: -2;
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

在上面的代码中，我们创建了一个 .ball 类，使用 border-radius 属性将其变成一个圆形，并使用 position: relative 属性将其定位。

接下来，我们使用 animation 属性来定义动画，将其命名为 rotate，持续时间为 2 秒，线性运动，无限循环。

在 .ball:before 中，我们使用 box-shadow 属性定义元素的阴影。由于我们需要创建发光的效果，因此使用了多重阴影。然后，我们使用 z-index 属性将其放置到第一层。

在 .ball:after 中，我们使用和 .ball:before 类似的方法来创建一个较小的圆形元素，并使用 z-index 属性将其放置到第二层。

最后，我们使用 @keyframes 定义动画序列，将其命名为 rotate，开始为 from，结束为 to，旋转角度为 360 度。

结束语

现在，你已经学会如何使用 CSS 实现具有发光效果的旋转球动画。这种动画效果可以在很多场合中应用，例如网站的加载动画、背景图案等。希望本文能对你有所帮助！