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

在本篇文章中，我们将手把手地教你如何使用 CSS 实现具有发光效果的旋转球动画。这个动画可以用来装饰网页，使其更加动感和时尚。

HTML 代码

首先，我们需要编写 HTML 代码来定义一个容器元素，然后将球体元素放置在其中：

<div class="ball-container">
  <div class="ball"></div>
</div>

为了方便，我们将球体元素定义为一个 <div> 元素，并将其类名设置为 ball。此外，我们还定义了一个球体容器元素，并将其类名设置为 ball-container。

CSS 代码

接下来，我们将编写 CSS 代码，为球体元素添加旋转动画和光晕效果。以下是完整的 CSS 代码：

/* 容器样式 */
.ball-container {
  position: relative;
  margin: 0 auto;
  width: 120px;
  height: 120px;
  perspective: 500px;
}

/* 球体样式 */
.ball {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.3), 0 0 40px 10px rgba(255, 255, 255, 0.2), 0 0 60px 15px rgba(255, 255, 255, 0.1), inset 0 0 20px 5px rgba(255, 255, 255, 0.2);
  animation: rotate 2s linear infinite;
}

/* 旋转动画 */
@keyframes rotate {
  from { transform: rotateY(0); }
  to { transform: rotateY(360deg); }
}

代码解析：

• .ball-container：定义球体容器元素的样式，包括相对定位、自动居中、宽高等；
• .ball：定义球体元素的样式，包括绝对定位、大小、边框圆角、盒阴影、动画等；
• box-shadow：定义球体元素的光晕效果，主要是多个不同透明度的白色盒阴影叠加而成；
• animation：定义球体元素的旋转动画，使用 rotate 动画，持续时间为 2 秒，线性运动，无限循环。

运行效果

通过以上代码，我们就可以实现具有发光效果的旋转球动画了。可以将代码复制粘贴到你的网页中，或者点击以下链接查看演示效果：

Demo

总结

CSS 是一种非常强大的样式语言，可以用来实现各种有趣的动画效果。在本篇文章中，我们学习了如何使用 CSS 实现具有发光效果的旋转球动画。这个动画不仅可以用来装饰网页，还可以用来提高网页的留存率和吸引力。希望本篇文章能够对你有所帮助，谢谢！