CSS黃色火光特效是一種很酷的效果,能夠為網頁增添一份熱烈和狂熱的氛圍,也能夠使網頁變得更具有動感和活力。
.fire { background-image: radial-gradient(yellow 20%, transparent 70%); width: 100px; height: 100px; position: relative; } .fire::before { content: ""; width: 50%; height: 50%; border-radius: 50%; background: #ffa500; position: absolute; top: 25px; left: 25px; animation: fire 2s ease-in-out infinite alternate-reverse; } .fire::after { content: ""; width: 50%; height: 50%; border-radius: 50%; background: #ffa500; position: absolute; top: 25px; right: 25px; animation: fire 2s ease-in-out infinite alternate-reverse; } @keyframes fire { 0% { transform: scale(1); } 20% { transform: scale(0.5) rotate(15deg); } 40% { transform: scale(0.8) rotate(-15deg); } 60% { transform: scale(0.6) rotate(10deg); } 80% { transform: scale(0.9) rotate(5deg); } 100% { transform: scale(1) rotate(0); } }
上面的代碼就是實現這個效果的代碼,主要是用到了radial-gradient來實現黃色火光的背景,以及使用偽元素::before和::after來實現兩個火苗,而動畫部分則是使用了css動畫。
需要注意的是,CSS黃色火光特效是比較消耗性能的,如果在較老的瀏覽器上使用可能會導致卡頓和炸機等問題,因此建議在使用前先考慮一下瀏覽器的兼容性。