燈籠CSS是一種非常有趣的CSS動畫效果,它能夠模擬燈籠晃動的效果,非常適合用于節日網站的裝飾。
.lantern { position: relative; animation: lantern 2s infinite ease-in-out; } .lantern::before { position: absolute; content: ''; height: 15px; width: 15px; background: #f37736; border-radius: 100%; top: 20px; left: 0; box-shadow: 0px 0px 10px #f37736; } .lantern::after { content: ''; position: absolute; background: #f37736; height: 50px; width: 50px; border-radius: 0 0 40px 40px; transform: skewY(-10deg); left: -17.5px; top: 27.5px; box-shadow: 0px 0px 10px #f37736; } @keyframes lantern { 0% { transform: rotate(0deg); } 50% { transform: rotate(10deg); } 100% { transform: rotate(0deg); } }
上面的代碼中,我們定義了一個lantern類,它包含了燈籠的主要樣式和動畫效果。利用偽元素實現了燈籠熱氣的效果,通過關鍵幀動畫模擬了燈籠的晃動效果。
如果你想在你的節日網站中使用燈籠CSS,只需要將上面的代碼復制到你的CSS文件中,并在HTML中添加相應的類名即可。