使用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>
运行上述代码将创建一个带有动态烟花效果的“龙年新年快乐”祝福页面。需注意以下几点：
- CSS中定义了
@keyframes动画，使得烟花(.firework)可以放大并渐隐。 - JavaScript代码创建了多个烟花元素，并将它们安排在页面随机位置展示动画。
- 页面背景和文字颜色可以根据需要进行调整。
这个页面非常基础，对于真正的网站，你可能想要添加更多的CSS样式、改进烟花效果、或是添加更多的交互性元素。这个例子提供了一个起点，你可以根据自己的需求进行扩展和定制。 🎆🎉
本文转载自: https://blog.csdn.net/qq_56579776/article/details/135817063
版权归原作者 猴哥是肖鸿 所有， 如有侵权，请联系我们删除。
版权归原作者 猴哥是肖鸿 所有， 如有侵权，请联系我们删除。