煙花特效是網頁設計中常用的一個效果。利用CSS，我們可以很簡單地做出這樣的效果，讓網頁更加生動動態。下面就讓我們來看一下怎樣用CSS做出煙花特效吧！

/* 首先，我們需要設置煙花的容器 */
.fireworks {
position: relative; /* 定位為相對定位 */
width: 100%; /* 容器寬度為100% */
height: 100%; /* 容器高度為100% */
}
/* 然后，我們需要設置煙花的粒子 */
.particle {
position: absolute; /* 定位為絕對定位 */
width: 10px; /* 粒子寬度為10px */
height: 10px; /* 粒子高度為10px */
border-radius: 50%; /* 粒子圓角為50% */
}
/* 接下來，讓我們來設置煙花的爆炸動畫 */
@keyframes explode {
0% {
transform: scale(0); /* 初始狀態為0 */
opacity: 1; /* 初始透明度為1 */
}
100% {
transform: scale(2); /* 最終狀態為2倍 */
opacity: 0; /* 最終透明度為0 */
}
}
/* 最后，讓我們來用CSS實現煙花特效 */
.particle:nth-of-type(1) {
top: 50%;
left: 50%;
background-color: #ff69b4;
animation: explode 1s ease-out forwards; /* 執行動畫 */
}
.particle:nth-of-type(2) {
top: 40%;
left: 60%;
background-color: #00bfff;
animation: explode 1.2s ease-out forwards; /* 執行動畫 */
}
.particle:nth-of-type(3) {
top: 60%;
left: 40%;
background-color: #ffff00;
animation: explode 1.5s ease-out forwards; /* 執行動畫 */
}
/* 這樣，我們就完成了一個簡單的煙花特效！ */