如何使用 HTML 和 CSS 创建发光的星星效果？

在网页设计中，我们经常需要使用各种各样的效果来增加页面的视觉效果和吸引力。其中，发光的星星效果是一种非常好看的效果，能够让页面更加有趣、生动。那么，你知道如何使用 HTML 和 CSS 来创建这种效果吗？

在本文中，我将为你介绍如何使用 HTML 和 CSS 来创建发光的星星效果。首先，让我们来看一下这个效果的样子：

这就是一个非常棒的效果，它的实现其实很简单。下面我们就来一步步实现它。

HTML 代码

首先，我们需要创建一些 HTML 代码来放置星星。这里我创建了一个 div 元素，并在其中添加了 5 个 span 元素，分别代表 5 颗星星。

<div class="stars">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

这里需要注意的是，每个 span 元素都是空的，没有任何内容。接下来，我们就可以使用 CSS 来让它们显示出来，并添加发光效果。

CSS 代码

首先，我们需要设置一些基本的样式，让这些星星可以正常的显示在页面上。

.stars {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  transform: rotate(45deg);
}
.stars span {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #fff;
}
.stars span:nth-child(1) {
  top: 15px;
  left: 75px;
}
.stars span:nth-child(2) {
  top: 75px;
  left: 30px;
}
.stars span:nth-child(3) {
  top: 135px;
  left: 75px;
}
.stars span:nth-child(4) {
  top: 75px;
  left: 120px;
}
.stars span:nth-child(5) {
  top: 75px;
  left: 75px;
  transform: rotate(45deg);
}

这里的样式设置比较简单，就是设置了一些基本的样式，比如星星的位置、大小、背景色等等。需要注意的是，我们将整个 div 元素旋转了 45 度，这是为了让星星之间可以呈现出比较好看的形状。

接下来，我们就开始添加发光效果了。这里我们使用了 CSS3 的两个属性：box-shadow 和 transform。

.stars span {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #fff;
  box-shadow: 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 50px #ff8, 0 0 60px #ff8;
  transform-origin: center;
  animation: twinkling 1s infinite;
}
@keyframes twinkling {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

这里的 box-shadow 属性是用来添加发光效果的。我们使用了 5 个不同大小的框阴影，让星星看起来呈现出逐渐扩散的效果。同时，我们还使用了 transform-origin 属性，将发光部分的位置设置为星星的中心，这样就会显得更加的真实。

还有一个非常重要的部分就是动画效果。我们使用了 animation 属性来设置一个名为 twinkling 的动画，它会让星星逐渐变亮变暗，形成闪烁的效果。具体的实现方法是，我们设置了两个帧，一开始星星的大小为 1，透明度为 1，随着时间的推移，星星的大小会变成 1.5，透明度会变成 0，最终就会看起来消失了。

完整代码

<div class="stars">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

.stars {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  transform: rotate(45deg);
}
.stars span {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #fff;
  box-shadow: 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 50px #ff8, 0 0 60px #ff8;
  transform-origin: center;
  animation: twinkling 1s infinite;
}
.stars span:nth-child(1) {
  top: 15px;
  left: 75px;
}
.stars span:nth-child(2) {
  top: 75px;
  left: 30px;
}
.stars span:nth-child(3) {
  top: 135px;
  left: 75px;
}
.stars span:nth-child(4) {
  top: 75px;
  left: 120px;
}
.stars span:nth-child(5) {
  top: 75px;
  left: 75px;
  transform: rotate(45deg);
}
@keyframes twinkling {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

这就是我们如何使用 HTML 和 CSS 来创建发光的星星效果。希望能对你有所帮助！