CSS3熱氣效果是一種非常酷的效果，它可以讓元素看起來像是冒著熱氣。這個效果通常會被用在熱氣騰騰的場景里，比如一個蒸汽機或者一個開水壺。

.box {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #e9e9e9;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.9) inset,
0 0 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.box:before {
content: "";
position: absolute;
top: -50px;
left: -50px;
width: 300px;
height: 300px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.4);
transform: scale(0);
animation: round 2s ease-in-out infinite;
}
.box:after {
content: "";
position: absolute;
bottom: -80px;
left: -80px;
width: 400px;
height: 400px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.2);
transform: scale(0);
animation: round 3s ease-in-out infinite;
}
@keyframes round {
0% {
transform: scale(0);
opacity: 0.8;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}

這段代碼創(chuàng)建了一個圓形的容器，并使用偽元素:before和:after來創(chuàng)建熱氣的效果。它使用了CSS3的動畫特性來讓熱氣不停地冒出來，直到畫面結束。

還有一些其他的熱氣效果，比如讓元素旋轉，讓煙霧浮起來，或者使用CSS3的濾鏡效果來模擬氣體。無論哪種方式，熱氣效果都可以讓你的頁面看起來更加生動有趣。