跨年代码 烟花代码html
时间: 2023-08-25 10:07:47 浏览: 179
跨年烟花代码.html
以下是一个简单的HTML烟花代码,你可以在跨年时使用它来庆祝新年:
```html
<!DOCTYPE html>
<html>
<head>
<title>跨年烟花</title>
<style>
#firework {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 50px solid #fff;
position: absolute;
left: 50%;
transform: translateX(-50%);
animation: explode 1s ease-out forwards;
}
@keyframes explode {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.5);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
</style>
</head>
<body>
<button onclick="fire()">点我放烟花</button>
<script>
function fire() {
var firework = document.createElement("div");
firework.setAttribute("id", "firework");
document.body.appendChild(firework);
setTimeout(function() {
document.body.removeChild(firework);
}, 1000);
}
</script>
</body>
</html>
```
这段代码创建了一个按钮,当点击按钮时,会在页面上创建一个白色的三角形,模拟烟花的形状。烟花会在1秒钟内扩散和消失。你可以通过CSS调整烟花的样式,让它看起来更加漂亮。
阅读全文