css制作烟花绽放 |提交按钮的css

.firework {
position: fixed; 
top: -20%; 
left: 50%; 
width: 0; 
height: 0; 
border-top: 30px solid #f00; 
border-right: 20px solid transparent; 
border-left: 20px solid transparent;
animation: fireworks 1s ease-out;
}
@keyframes fireworks {
0% {
top: -20%;
transform: rotate(0deg);
}
50% {
top: 50%;
transform: rotate(180deg);
}
100% {
width: 80px;
height: 80px;
top: 50%;
transform: rotate(360deg);
opacity: 0;
}
}

代码中，大家首先定义了一个名为“firework”的CSS类，将其“position”属性设置为fixed，表示它是绝对定位的，不会随页面的滚动而改变位置。然后，大家将其“top”属性设置为-20%，将其移至页面顶部的外面，等待触发烟花绽放事件。

接下来，大家定义了三个边框，设置了它们的颜色、宽度等属性，这些都是产生烟花绽放效果不可缺少的元素。

最后，大家定义了一个“fireworks”动画，让烟花顺时针旋转，并逐渐变大，同时逐渐透明，最终消失不见。

在页面中使用该CSS类，只需添加一个div，并为其添加“firework”类即可触发烟花绽放效果，如下所示：

<div class="firework"></div>

以上就是使用CSS制作烟花绽放效果的方法，通过灵活运用动画、边框等属性，大家可以创造出更加绚丽多彩的视觉效果，让页面更加生动有趣。