使用css3写个元旦快乐代码 有烟花爆竹特效
时间: 2023-02-22 16:55:01 浏览: 101
好的,这是一个使用 CSS3 实现元旦快乐动画的例子:
HTML 代码:
```
<div class="fireworks">
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
</div>
```
CSS 代码:
```
.fireworks {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.firework {
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
background: #f00;
border-radius: 50%;
transform: translate(-50%, -50%);
animation: firework 1s infinite;
}
.firework:nth-child(2) {
animation-delay: 0.2s;
}
.firework:nth-child(3) {
animation-delay: 0.4s;
}
.firework:nth-child(4) {
animation-delay: 0.6s;
}
.firework:nth-child(5) {
animation-delay: 0.8s;
}
@keyframes firework {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1.5);
opacity: 0;
}
}
```
这段代码将在页面中显示五个红色的小圆圈,它们会以不同的时间间隔周期性地变大并消失,形成烟花爆竹的效果。你可以通过调整 CSS 中的参数来改变烟花的样式和动画效果。
阅读全文