近幾年來，純CSS實現動畫效果越來越普遍，大大降低了前端開發的工作難度。今天我們來學習純CSS實現煙花效果，讓我們的網頁變得更加生動有趣。

.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;
}
}

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

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

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

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

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