html朋友生日祝福炫酷

可以使用CSS3的动画效果和JavaScript的事件监听来实现一个炫酷的生日祝福页面。以下是一个简单的示例代码：

HTML部分：

<div id="cake" class="animated">
  <div class="candle"></div>
  <div class="candle"></div>
  <div class="candle"></div>
  <div class="candle"></div>
  <div class="candle"></div>
  <div class="flame"></div>
</div>

CSS部分：

#cake {
  width: 200px;
  height: 200px;
  background-color: #f9e4b7;
  border-radius: 50% 50% 0 0;
  position: relative;
  margin: 50px auto;
}

.candle {
  width: 10px;
  height: 100px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
}

.candle:nth-child(1) {
  left: 20px;
}

.candle:nth-child(2) {
  left: 40px;
}

.candle:nth-child(3) {
 left: 60px;
}

.candle:nth-child(4) {
  left: 80px;
}

.candle:nth-child(5) {
  left: 100px;
}

.flame {
  width: 20px;
  height: 20px;
  background-color: #f00;
  border-radius: 50%;
  position: absolute;
  bottom: 100px;
  left: calc(50% - 10px);
  animation: flame 1s infinite alternate;
}

@keyframes flame {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}

.animated {
  animation-duration: 2s;
  animation-name: bounceIn;
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

JavaScript部分：

var cake = document.getElementById('cake');
cake.addEventListener('click', function() {
  cake.classList.add('animated');
});

以上代码实现了一个带有蜡烛和火焰的生日蛋糕，点击蛋糕后会触发CSS动画效果。