HTML5之夜景放烟花

HTML5结合JavaScript和CSS可以创建一个夜景放烟花的动画。以下是一个简单的示例代码：




<!DOCTYPE html>
<html>
<head>
<style>
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}
 
.sky {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}
 
.fireworks {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: #ffc107;
  opacity: 0;
  transform: translateX(-50%);
}
</style>
</head>
<body>
 
<div class="sky">
  <div class="fireworks" id="fireworks"></div>
</div>
 
<script>
function createFirework(x, y, color) {
  var firework = document.createElement('div');
  firework.className = 'firework';
  firework.style.left = x + 'px';
  firework.style.top = y + 'px';
  firework.style.background = color;
  document.body.appendChild(firework);
  
  setTimeout(function() {
    firework.remove();
  }, 300);
}
 
function createFireworks() {
  var sky = document.querySelector('.sky');
  var fireworks = document.getElementById('fireworks');
  var x = Math.random() * window.innerWidth;
  var y = Math.random() * window.innerHeight;
  var color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) + ')';
  
  sky.style.background = color;
  fireworks.style.left = x + 'px';
  fireworks.style.top = y + 'px';
  fireworks.style.opacity = 1;
  
  setTimeout(function() {
    fireworks.style.opacity = 0;
  }, 500);
  
  for (var i = 0; i < 30; i++) {
    setTimeout(function() {
      createFirework(x, y, color);
    }, i * 20);
  }
}
 
function random(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}
 
setInterval(createFireworks, 5000);
</script>
 
</body>
</html>

这段代码会每5秒钟在随机位置创建一个由小火焰构成的大火花，并且根据随机颜色改变夜空背景。每个小火焰在屏幕上持续短暂的闪烁后消失。这个示例提供了一个简单的火焰发射机制，可以通过扩展来添加更复杂的特效。

HTML5之夜景放烟花

评论已关闭

推荐阅读