你给我写一段html的烟花代码
时间: 2023-08-31 22:20:11 浏览: 108
### 回答1:
好的,以下是一段 HTML 烟花代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
/* 设置背景颜色为黑色 */
body {
background-color: black;
}
/* 设置烟花样式 */
.firework {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: white;
animation: explode 1s linear;
}
/* 设置烟花动画 */
@keyframes explode {
from {
transform: translateY(0);
}
to {
transform: translateY(-100vh);
}
}
</style>
</head>
<body>
<!-- 创建一个 div 元素,并添加烟花样式 -->
<div class="firework"></div>
</body>
</html>
```
这段代码会在浏览器中显示一个从顶部坠落的白色圆圈(烟花)。
希望这对您有帮助!
### 回答2:
当然可以!以下是一段简单的HTML烟花代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.firework {
position: absolute;
width: 20px;
height: 20px;
background-color: orange;
border-radius: 50%;
animation: explode 1s ease-out;
animation-fill-mode: forwards;
}
@keyframes explode {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2.5);
opacity: 0;
}
}
</style>
</head>
<body>
<button onclick="createFirework()">点击放烟花</button>
<script>
function createFirework() {
var firework = document.createElement("div");
firework.classList.add("firework");
firework.style.left = (Math.random() * 90) + "%";
firework.style.top = (Math.random() * 90) + "%";
document.body.appendChild(firework);
}
</script>
</body>
</html>
```
这段代码创建了一个按钮,当点击按钮时,会在页面的随机位置生成一个烟花效果。烟花是一个带有橙色背景和圆形边界的div元素。通过使用CSS的`@keyframes`动画,实现了烟花的放大和逐渐消失的效果。通过点击按钮,会使用JavaScript动态创建烟花元素,并将其附加到文档的body内。
### 回答3:
当然可以!以下是一个简单的HTML烟花代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
}
.firework {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #FFD700;
box-shadow: 0 0 10px #FFD700;
animation-name: explode;
animation-duration: 1s;
animation-timing-function: linear;
}
@keyframes explode {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(5);
opacity: 0;
}
}
</style>
</head>
<body>
<script>
function createFirework() {
const firework = document.createElement("span");
firework.className = "firework";
firework.style.left = Math.random() * 100 + "%";
firework.style.top = Math.random() * 100 + "%";
document.body.appendChild(firework);
setTimeout(() => {
firework.remove();
}, 1000);
}
setInterval(() => {
createFirework();
}, 200);
</script>
</body>
</html>
```
这段代码将在黑色背景上创建闪烁的金色烟花效果。点击此处可以看到烟花在页面上呈现的效果:[烟花效果](https://codepen.io/eclairereese/pen/ExWwVvq)。
这段代码包括一个名为`.firework`的CSS类和一个名为`createFirework()`的JavaScript函数。在函数中,我们创建一个圆形的`<span>`元素,给它添加`.firework`类并随机设置位置。然后将该元素附加到文档的`<body>`中,并在1秒后将其删除。最后,我们使用`setInterval`函数来每200毫秒调用一次`createFirework()`函数,从而实现连续不断的烟花效果。
阅读全文