html烟花代码复制
时间: 2023-11-06 11:03:10 浏览: 212
HTML烟花代码是一种用HTML和CSS实现的效果,可以在网页上展示炫丽的烟花效果。下面是一个简单的HTML烟花代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes fireworks {
0% { background-color: #ff0000; left: 50%; top: 100%; }
25% { background-color: #00ff00; left: 25%; top: 50%; }
50% { background-color: #0000ff; left: 0%; top: 0%; }
75% { background-color: #ffff00; left: 75%; top: 50%; }
100% { background-color: #ff00ff; left: 50%; top: 0%; }
}
.firework {
position: fixed;
width: 10px;
height: 10px;
border-radius: 50%;
animation: fireworks 2s infinite;
}
</style>
</head>
<body>
<div class="firework"></div>
</body>
</html>
```
这段代码通过CSS的`@keyframes`动画来定义了烟花的颜色和位置变化。通过设置`position: fixed`,使得烟花在页面中固定位置显示。`width`和`height`可以调整烟花的大小,`border-radius`可以设置烟花的形状为圆形。`animation`属性指定了动画效果,其中`fireworks`为动画名称,`2s`为动画时间,`infinite`表示动画无限循环播放。
在HTML文件中,创建一个`div`元素,给它一个`firework`类名。这样就能在页面上呈现一个炫丽的烟花效果了。
你可以复制上述代码并保存为一个HTML文件,然后用浏览器打开该文件,就可以在浏览器中看到烟花效果了。