发光立方体效果 html+css

要创建一个发光立方体效果，我们可以使用CSS3的3D转换和动画功能。以下是一个简单的示例代码：

HTML:

<div class="cube">
  <div class="side front"></div>
  <div class="side back"></div>
  <div class="side right"></div>
  <div class="side left"></div>
  <div class="side top"></div>
  <div class="side bottom"></div>
</div>

CSS:

.cube {
  width: 100px;
  height: 100px;
  margin: 50px auto;
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(45deg);
  animation: glow 5s infinite alternate;
}
 
.side {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #ff0000;
  opacity: 0.5;
}
 
.front {
  transform: translateZ(50px);
}
 
.back {
  transform: translateZ(-50px);
}
 
.right {
  transform: rotateY(90deg) translateZ(50px);
}
 
.left {
  transform: rotateY(90deg) translateZ(50px);
}
 
.top {
  transform: rotateX(90deg) translateZ(50px);
}
 
.bottom {
  transform: rotateX(90deg) translateZ(50px);
}
 
@keyframes glow {
  0% {
    box-shadow: 0 0 10px #fff;
  }
  100% {
    box-shadow: 0 0 20px #ff0;
  }
}

这段代码创建了一个立方体，并通过@keyframes定义了一个名为glow的动画，使立方体持续发光。动画中立方体的光晕动画由白变为黄，模拟了发光效果。