說起CSS3效果，大家自然而然會想到各種炫酷的旋轉、漸變、動畫等特效。今天，我們來介紹一個非常酷炫的CSS3效果——火焰纏繞。

CSS3火焰纏繞效果，可以讓我們的頁面瞬間變得熱情洋溢、充滿活力。這個效果的實現依賴于CSS3中的漸變效果。

.fire {
height: 400px;
width: 400px;
border-radius: 50%; 
position: relative; 
background: 
radial-gradient(closest-side, transparent 49%, #f00 50%) center/50%,
radial-gradient(closest-side, transparent 49%, #ff6700 50%) center/45%,
radial-gradient(closest-side, transparent 49%, #ffdc00 50%) center/40%,
radial-gradient(closest-side, transparent 49%, #fff 50%) center/35%,
radial-gradient(closest-side, transparent 49%, #fff 50%) center/30%,
radial-gradient(closest-side, transparent 49%, #f00 50%) center/25%,
#f6fefb;
box-shadow: inset 0 15px 0 rgba(255, 255, 255, .5), 0 20px 50px rgba(0, 0, 0, .3), 0 0 0 100em rgba(0, 0, 0, .2);
}
.fire:before {
content: '';
position: absolute;
top: -35%;
left: -35%;
bottom: -35%;
right: -35%;
background: radial-gradient(circle, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
animation: glow 4s ease-in-out infinite;
}
@keyframes glow {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
100% {
opacity: 0;
}
}

通過上面的代碼，我們可以將一個div標簽變成一個火焰纏繞著的圖形。其中，div標簽的背景由多個徑向漸變圖形組成。通過調整徑向漸變的位置和大小，我們可以調整火焰的形狀和顏色。

除了背景圖形，我們還給火焰添加了一個simple box shadow效果和一個輝光的動畫。通過微調陰影的位置和強度，我們可以調整出一個更逼真、更有動態感的火焰效果。

CSS3火焰纏繞效果雖然看起來很復雜，但只要仔細地理解其中漸變和動畫效果的原理，相信大家同樣可以輕松上手。