最近我嘗試用CSS畫了一個鍋爐,感覺非常有趣。以下是我的代碼:
.boiler { width: 300px; height: 200px; background-color: #eee; border-radius: 10px 10px 0 0; margin: 0 auto; position: relative; } .boiler:before { content: ""; position: absolute; width: 120px; height: 120px; background-color: #f9c116; border-radius: 50%; left: 50%; top: 60px; margin-left: -60px; z-index: 1; } .boiler:after { content: ""; position: absolute; width: 100%; height: 10px; background-color: #444; left: 0; bottom: 0; z-index: 3; } .boiler .flame { position: absolute; width: 80px; height: 80px; background-color: #f9c116; border-radius: 50%; left: 50%; top: 60px; margin-left: -40px; z-index: 2; box-shadow: 0 0 40px #f9c116; animation: flame 1s ease-in-out alternate infinite; } @keyframes flame { 0% { transform: scale(0.5); } 100% { transform: scale(1.2); } }
我首先創建了一個容器,用作鍋爐的主體。然后我用CSS偽類:before和:after畫出了鍋爐的突出部分和底座。最后,我通過CSS動畫來制作火焰的效果。
這個鍋爐看起來非常逼真,而且只需要使用CSS就可以輕松實現。這些基本的CSS屬性和技巧可以幫助您創建任何形狀和圖案的設計。所以,為什么不嘗試自己動手畫一個鍋爐呢?