2020版CSS火焰字體給我們帶來了一個華麗的視覺效果。這個字體用CSS和JavaScript制作,可以用于網頁設計和廣告宣傳。
@keyframes fire { 0% { text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 6px #fff, 0 0 9px #ff4d00, 0 0 12px #ff4d00, 0 0 15px #ff4d00, 0 0 18px #ff4d00; } 50% { text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 6px #fff, 0 0 9px #fff, 0 0 12px #ff4d00, 0 0 15px #ff4d00, 0 0 18px #ff4d00; } 100% { text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 6px #fff, 0 0 9px #fff, 0 0 12px #fff, 0 0 15px #ff4d00, 0 0 18px #ff4d00; } } h1 { font-family: 'Trebuchet MS', sans-serif; font-size: 80px; text-align: center; color: #000; animation: fire 1s ease-in-out infinite; }
使用上面的代碼可以制作出一個簡單的CSS火焰字體,因為CSS動畫的限制,我們需要用JavaScript來控制動畫的速度和方向。
火焰字體可以應用于許多不同的用途,例如網站標志、產品品牌以及許多其他的設計中。讓我們一起發揮想象力,創造出更多獨特的設計吧!
下一篇21天學通css