HTML煙花圖片流動是一種非常炫酷的效果，可以讓網頁顯得更加生動、有趣。下面我們來介紹一下如何使用HTML代碼實現這種圖片流動效果。
<html>
<head>
<title>HTML煙花圖片流動效果</title>
<style>
.container {
position: relative;
}
.firework {
position: absolute;
width: 40px;
height: 40px;
background-image: url('firework.png');
animation: firework 1.5s infinite ease-in-out;
}
@keyframes firework {
from {
transform: rotate(0);
opacity: 1;
}
to {
transform: rotate(360deg);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="firework" style="left: 20%; top: 50%;"></div>
<div class="firework" style="left: 40%; top: 60%;"></div>
<div class="firework" style="left: 60%; top: 40%;"></div>
<div class="firework" style="left: 80%; top: 70%;"></div>
</div>
</body>
</html>在上面的代碼中，我們首先使用了一個容器的div元素，對應的類名為 container。接下來，我們對每一個煙花圖片都設置了一個類名為 firework，通過設置position屬性為absolute，把它們設置到了容器的中間位置。然后，我們通過設置這些煙花圖片的位置，讓它們呈現不同的位置和方向。
最后，我們通過使用CSS3的animation屬性，對這些煙花圖片設置了一個動畫，讓它們旋轉360度，并且在動畫結束之后消失。通過這樣一種簡單的方式，就可以實現非常炫酷的HTML煙花圖片流動效果。