用web语言写一个龙年新年快乐的HTML代码页面,要求带动态图案效果

用web语言写一个龙年新年快乐的HTML代码页面,要求带动态图案效果

使用html结合CSS和JavaScript来创建一个带有动态图案效果的新年快乐页面。以下是一个简单的示例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Dragon Year</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: 'Arial', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333;
  }
  .container {
    text-align: center;
    color: #FFD700;
  }
  .fireworks {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
  }
  @keyframes fireworks {
    to {
      transform: scale(1.2);
      opacity: 0;
    }
  }
  .firework {
    position: absolute;
    bottom: 20px;
    background: radial-gradient(circle closest-side, #ffffff 0%, transparent 50%);
    box-shadow: 0 0 6px 4px #ffffff88;
    border-radius: 50%;
    pointer-events: none;
    animation: fireworks 1s ease-out infinite;
  }
</style>
</head>
<body>
<div class="container">
  <h1>龙年新年快乐!</h1>
  <h2>祝您幸福安康,万事如意。</h2>
</div>

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

<script>
// 添加烟花效果
function createFirework() {
  const firework = document.createElement("div");
  firework.classList.add("firework");
  firework.style.left = Math.random() * 100 + "vw";
  firework.style.animationDuration = Math.random() * 3 + 2 + "s"; // 2 to 5 seconds
  firework.style.animationDelay = Math.random() * 5 + "s"; // 0 to 5 seconds delay
  document.querySelector(".fireworks").appendChild(firework);

  // Remove the element after it has finished
  firework.addEventListener("animationend", (e) => {
    e.target.remove();
  });
}

// Create a bunch of fireworks to start
for (let i = 0; i < 50; i++) {
  createFirework();
}

// Every so often, create a new one to keep the effect going
setInterval(createFirework, 1000);
</script>
</body>
</html>

 

运行上述代码将创建一个带有动态烟花效果的“龙年新年快乐”祝福页面。需注意以下几点:

1. CSS中定义了`@keyframes`动画,使得烟花(`.firework`)可以放大并渐隐。
2. JavaScript代码创建了多个烟花元素,并将它们安排在页面随机位置展示动画。
3. 页面背景和文字颜色可以根据需要进行调整。

这个页面非常基础,对于真正的网站,你可能想要添加更多的CSS样式、改进烟花效果、或是添加更多的交互性元素。这个例子提供了一个起点,你可以根据自己的需求进行扩展和定制。 🎆🎉

转载请说明出处内容投诉
CSS教程_站长资源网 » 用web语言写一个龙年新年快乐的HTML代码页面,要求带动态图案效果

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买