CSS是一種用于樣式和布局的編程語言,可以實現各種有趣的頁面動效,例如煙花動效。
要實現煙花動效,需要使用CSS的關鍵幀動畫(@keyframes),利用transform和opacity屬性來實現縮放和漸隱效果,同時使用偽元素(::before和::after)來創建煙花的形狀。
.firework { position: absolute; width: 200px; height: 200px; border-radius: 50%; background-color: #f00; animation: firework 3s linear infinite; } .firework::before, .firework::after { content: ""; display: block; position: absolute; width: 50px; height: 50px; background-color: #fff; border-radius: 50%; opacity: 0; animation: spark 3s linear infinite; } .firework::before { left: 0; top: 50px; } .firework::after { right: 0; top: 50px; } @keyframes firework { 0% { transform: scale(1); } 50% { transform: scale(2); } 100%{ transform: scale(1); } } @keyframes spark { 0% { opacity: 0; } 50% { opacity: 1; transform: translateX(-20px) rotate(45deg); } 100%{ opacity: 0; } }
以上代碼中,.firework表示煙花的形狀,設置了寬高、圓角和背景顏色。使用animation屬性設置了firework關鍵幀動畫,并無限循環播放。
偽元素::before和::after分別表示兩個火花,設置了寬高、圓角和背景顏色,并使用opacity屬性設置了透明度為0,即不可見。同時設置了spark關鍵幀動畫,使火花逐漸出現并向左偏移和旋轉45度后逐漸消失。
通過組合煙花和火花的動效,就可以實現美麗的煙花動畫效果。