html+css倒计时烟花绽放源代码

好的，这是一个简单的倒计时烟花绽放的HTML和CSS源代码，你可以根据自己的需求进行修改：

HTML代码：

<div class="countdown">
  <div class="countdown-number">
    <span class="days"></span>
    <span class="hours"></span>
    <span class="minutes"></span>
    <span class="seconds"></span>
  </div>
  <div class="countdown-label">
    <span class="days-label">Days</span>
    <span class="hours-label">Hours</span>
    <span class="minutes-label">Minutes</span>
    <span class="seconds-label">Seconds</span>
  </div>
</div>

<div class="fireworks">
  <div class="before"></div>
  <div class="after"></div>
</div>

CSS代码：

body {
  background-color: #000;
}

.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
  font-size: 2rem;
  color: #fff;
}

.countdown-number {
  display: flex;
}

.countdown-number > span {
  padding: 0.5rem;
  border-radius: 0.25rem;
  background-color: #333;
  margin-right: 0.5rem;
}

.countdown-label {
  display: flex;
  flex-direction: column;
}

.countdown-label > span {
  font-size: 0.75rem;
}

.fireworks {
  position: relative;
  width: 100%;
  height: 100%;
}

.before,
.after {
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  margin: auto;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  background-size: 400% 400%;
  animation: fireworks 5s ease-in-out infinite;
}

.after {
  animation-delay: 2.5s;
}

@keyframes fireworks {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}