烟花代码,予心上人最璀璨烟花
以下是一个简单的示例，展示如何使用HTML、CSS和JavaScript创建一个简单的烟花效果。
<!-- html文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Confetti Animation</title>
<style>
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.confetti {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
background: red;
transform: rotate(0deg) scale(1);
animation: confetti-animation 5s infinite;
}
@keyframes confetti-animation {
0% {
transform: rotate(0deg) scale(1);
opacity: 1;
}
50% {
transform: rotate(90deg) scale(0.5);
opacity: 0.5;
}
100% {
transform: rotate(180deg) scale(0.2);
opacity: 0;
}
}
</style>
</head>
<body>
<div id="confetti-container"></div>
<script>
function createConfetti() {
const confettiContainer = document.getElementById('confetti-container');
const confetti = document.createElement('div');
confetti.classList.add('confetti');
confettiContainer.appendChild(confetti);
// 随机位置和大小
confetti.style.left = Math.random() * window.innerWidth + 'px';
confetti.style.top = Math.random() * window.innerHeight + 'px';
confetti.style.width = Math.random() * 10 + 'px';
confetti.style.height = confetti.style.width;
}
// 创建烟花
setInterval(createConfetti, 100);
</script>
</body>
</html>这段代码定义了一个简单的烟花效果，通过CSS中的@keyframes规则来实现烟花的飞行动画，并通过JavaScript定时创建烟花div并添加到页面中，模拟烟花飘落的效果。你可以将这段代码保存为html文件，通过浏览器打开查看效果。
评论已关闭