CSS可以實現炫酷的效果,比如煙花效果,只需要幾行代碼就可以實現。接下來,我們通過幾個步驟來實現煙花效果。
/* 1.創建容器 */ .fireworks{ position:relative; width: 500px; height: 500px; } /* 2.創建一個煙花 */ .fireworks .fire{ position: absolute; width: 20px; height: 20px; border-radius: 50%; background-color: #fff; } /* 3.煙花動畫 */ @keyframes fireworks { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } /* 4.每個煙花的動畫時間間隔不同,模仿真實煙花爆炸效果 */ .fireworks .fire:nth-child(1){ left: 200px; top: 250px; animation: fireworks 1s ease-in-out 1.1s infinite alternate; } .fireworks .fire:nth-child(2){ left: 300px; top: 200px; animation: fireworks 1s ease-in-out 1.4s infinite alternate; } .fireworks .fire:nth-child(3){ left: 250px; top: 300px; animation: fireworks 1s ease-in-out 1.7s infinite alternate; } .fireworks .fire:nth-child(4){ left: 150px; top: 200px; animation: fireworks 1s ease-in-out 2s infinite alternate; } .fireworks .fire:nth-child(5){ left: 350px; top: 250px; animation: fireworks 1s ease-in-out 2.3s infinite alternate; }
以上是實現煙花效果的代碼,我們可以在頁面中引入這些代碼,并在HTML中創建一個div容器,然后把創建的煙花放到這個容器中, 就可以實現炫酷的煙花效果了。
上一篇css在矩形上畫三角形
下一篇css圖片上覆蓋圖片上