<div class="shadow-text">
  文字陰影動畫
</div>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #2c3e50;
  font-family: Arial, sans-serif;
}

.shadow-text {
  font-size: 48px;
  color: #ecf0f1;
  text-shadow: 0px 0px 5px #e74c3c, 0px 0px 10px #e74c3c, 0px 0px 15px #e74c3c;
  animation: shadow-move 3s infinite alternate;
}

@keyframes shadow-move {
  0% {
    text-shadow: 0px 0px 5px #e74c3c, 0px 0px 10px #e74c3c, 0px 0px 15px #e74c3c;
  }
  25% {
    text-shadow: -10px -10px 15px #f39c12, 10px 10px 20px #d35400;
  }
  50% {
    text-shadow: -10px 10px 15px #27ae60, 10px -10px 20px #16a085;
  }
  75% {
    text-shadow: 10px -10px 15px #2980b9, -10px 10px 20px #8e44ad;
  }
  100% {
    text-shadow: 10px 10px 15px #e74c3c, -10px -10px 20px #c0392b;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.