CSS冒煙效果是網頁設計中常用的一個效果，它可以創建出一個類似煙霧一樣的動態效果，給用戶帶來獨特的視覺體驗。下面我們將介紹如何使用CSS創建這種冒煙效果。

.smoke {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
background: #fff;
}
.smoke:before {
content: "";
width: 20px;
height: 40px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
border-radius: 50% 50% 0 0;
background: rgba(0, 0, 0, 0.1);
filter: blur(10px);
animation: moveSmoke 2s ease-in-out infinite;
}
.smoke:after {
content: "";
width: 20px;
height: 40px;
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
border-radius: 50% 50% 0 0;
background: rgba(0, 0, 0, 0.1);
filter: blur(10px);
animation: moveSmoke 2s ease-in-out infinite;
}
@keyframes moveSmoke {
0% {
transform: translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translate(0, -150px);
opacity: 0;
}
}

首先，我們需要為元素設置一個相對定位，將其包括的內容設置為隱藏（overflow: hidden），以及一個背景顏色。然后，使用:before和:after偽元素來分別創建煙霧的上部和下部分。我們可以使用transform屬性和translate()函數居中對齊偽元素，并使用border-radius屬性來創建圓角。接下來，使用background和filter屬性為煙霧設置樣式和模糊效果。

最后，在@keyframes規則中創建一個動畫，讓煙霧上下移動，并在中間狀態增強煙霧的透明度，從而實現 “冒煙” 效果。

只要我們按照上述步驟將CSS代碼添加到網頁中，就能夠創建出一個獨特的冒煙效果。