欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css黃色火光特效

江奕云1年前8瀏覽0評論

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黃色火光特效是比較消耗性能的,如果在較老的瀏覽器上使用可能會導致卡頓和炸機等問題,因此建議在使用前先考慮一下瀏覽器的兼容性。