CSS3是一種用于網頁設計的樣式表語言,是CSS的更新版本。CSS3以其豐富的功能和改進的性能而廣受歡迎,其中之一就是其可以通過燭光動畫為網站增添火花。
/* 為元素添加燭光動畫 */ .candle { position: relative; height: 300px; width: 200px; background-color: #874723; border-radius: 30px; } .candle:before { content: ""; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: radial-gradient(circle at 50% 0, #FFF, transparent); opacity: 0.5; } .candle:after { content: ""; position: absolute; height: 50%; width: 50%; top: 0; right: 0; background: radial-gradient(circle at 50% 0, #FDCD5B, transparent); opacity: 0.7; transform: skewY(10deg); border-radius: 0 0 0 50%; } .flame { position: absolute; height: 50px; width: 50px; top: 30px; right: 30px; background: radial-gradient(circle at 50% 60%, #FDCD5B, rgba(253, 205, 91, 0)); border-radius: 50%; animation: flicker 0.5s infinite alternate; } /* 創建火焰動畫 */ @keyframes flicker { 0% { box-shadow: 0 0 0 0.5rem rgba(253, 205, 91, 0.8); } 25% { box-shadow: 0 0 0 1rem rgba(253, 205, 91, 0.8); } 50% { box-shadow: 0 0 0 0.5rem rgba(253, 205, 91, 0.8); } 100% { box-shadow: 0 0 0 0.5rem rgba(253, 205, 91, 0.8); } }
以上代碼展示了如何為一個元素添加燭光動畫,具體來說,我們首先通過:before偽元素創建了燭光的倒影,然后通過:after偽元素創建了鷹嘴形狀的燭光主體。最后,我們通過.flame類來為燭光添加火焰動畫。
以上就是CSS3燭光動畫的基本實現方式,它可以為網站增添火花,增強視覺感受。不過需要注意的是,使用燭光動畫也要注意網站的整體風格和視覺效果。
上一篇css3 濾鏡 工具
下一篇css3 滑動進度條