近幾年來，純CSS實(shí)現(xiàn)動畫效果越來越普遍，大大降低了前端開發(fā)的工作難度。今天我們來學(xué)習(xí)純CSS實(shí)現(xiàn)煙花效果，讓我們的網(wǎng)頁變得更加生動有趣。

.firework {
width: 16px;
height: 60px;
background: #f6d135;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
border-radius: 10px;
overflow: hidden;
animation: firework 2.5s ease-in-out infinite;
}
.firework::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
background: #ffffff;
border-radius: 50%;
animation: firework-dot 2.5s ease-in-out infinite;
}
@keyframes firework {
0% {
height: 0;
}
20% {
height: 40px;
}
40%, 50% {
height: 60px;
}
80%, 100% {
height: 0;
}
}
@keyframes firework-dot {
0%, 20%, 40%, 50%, 80%, 100% {
opacity: 0;
}
10%, 30% {
opacity: 1;
}
}

煙花的主體部分是一個(gè)長方形，使用border-radius屬性將其邊角變得圓潤。后面的圓點(diǎn)是通過偽元素::after實(shí)現(xiàn)的，設(shè)置為一個(gè)小圓點(diǎn)即可。通過animation屬性設(shè)置兩個(gè)關(guān)鍵幀動畫，完成整個(gè)煙花效果。

在HTML中，我們只需要一個(gè)簡單的div元素，通過class屬性來引入上面的CSS樣式。代碼如下：

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

將上面的代碼復(fù)制到你的HTML文檔中，你就可以看到簡單而美麗的純CSS煙花效果了。如果你想要自己嘗試添加更多的煙花，只需要復(fù)制上面的代碼塊，修改class名字即可。

總之，純CSS實(shí)現(xiàn)動畫效果不僅方便，而且加速了Web頁面的渲染速度，是前端開發(fā)中不可或缺的一部分。相信你們在實(shí)際開發(fā)中會運(yùn)用得非常自如，創(chuàng)造出更加生動、有趣的網(wǎng)頁。