console 命令行工具 X clear
console
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background: #ff99cc;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  font-family: 'Comic Sans MS', cursive;
}

.birthday-box {
  position: relative;
  text-align: center;
}

.lyrics {
  font-size: 2em;
  color: #ff0066;
  text-shadow: 2px 2px #ffffff;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.note {
  position: absolute;
  font-size: 3em;
  opacity: 0;
}

/* 新的歌词动画 */
@keyframes lyric-drop {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 调整后的动画设置 */
.lyrics span {
  opacity: 0;
  animation: lyric-drop 1s ease-out forwards;
}

/* 逐行延迟设置 */
.lyrics span:nth-child(1) { animation-delay: 0s; }
.lyrics span:nth-child(2) { animation-delay: 2s; }
.lyrics span:nth-child(3) { animation-delay: 4s; }
.lyrics span:nth-child(4) { animation-delay: 6s; }

/* 音符动画保持 */
@keyframes jump {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  50% { transform: translateY(-50px) rotate(360deg); }
  100% { transform: translateY(0) rotate(0); opacity: 0; }
}

.note:nth-child(1) {
  left: -50px;
  animation: jump 1s infinite;
  animation-delay: 0.2s;
}
.note:nth-child(2) {
  right: -50px;
  animation: jump 1s infinite;
  animation-delay: 0.5s;
}
.note:nth-child(3) {
  left: -30px;
  top: -50px;
  animation: jump 1s infinite;
  animation-delay: 0.8s;
}
</style>
</head>
<body>
  <div class="birthday-box">
    <div class="note">��</div>
    <div class="note">��</div>
    <div class="note">��</div>
    
    <div class="lyrics">
      <span>祝你生日快乐��</span>
      <span>祝你生日快乐��</span>
      <span>祝你幸福祝你健康��</span>
      <span>祝你前途光明✨</span>
    </div>
  </div>
</body>
</html>