一、效果搶先預覽
參見下面MP4視頻效果：

主要三部分：直立的紅燭、跳動的火焰，騰起的煙霧，這三部分都是純CSS實現(xiàn)的。

主要應用CSS3的線性漸變linear-gradient，徑向漸變radial-gradient，盒陰影box-shadow，圓角border-radius，變換transform以及動畫animation實現(xiàn)。

親身體驗，您可以狠狠地點擊這里：純CSS3實現(xiàn)蠟燭、火焰和煙霧demo

點擊蠟燭可以熄滅火焰，也可以點燃火焰，實現(xiàn)的源代碼在demo頁面上。

二、一些有意思的技術(shù)實現(xiàn)介紹
1. 圓角實現(xiàn)蠟燭的底邊圓弧

蠟燭的底邊圓弧

上圖這個圓弧效果直接使用CSS3的border-radius可以實現(xiàn)，但并不是簡單設(shè)置一個數(shù)值，因為這種效果的水平圓角和垂直圓角是不一樣的，具體設(shè)置如下：

.candle-body {
    width: 40px; height: 120px;
    border-radius: 0 0 40px 40px/0 0 16px 16px;
}
border-radius斜杠前面的是水平圓角大小，斜杠后面4個值是垂直圓角大小，深入介紹可參考我之前寫的文章：“秋月何時了，CSS3 border-radius知多少？”。

這篇文章中有個demo，可以用來調(diào)試各種圓角效果，實時呈現(xiàn)，省掉各種腦補圓角效果的痛苦，例如，底部弧形效果參數(shù)這樣：

底部弧形時候的設(shè)置

2. 火焰的形狀也是圓角實現(xiàn)的
火焰的形狀也是圓角實現(xiàn)的，我就在CSS3 border-radius圓角工具中拖一拖滑塊凹出來的造型：

火焰造型

然后所有數(shù)值除以300轉(zhuǎn)換成百分比就是蠟燭的形狀了。

.candle-flame {
    width: 10px; height: 20px;
    border-radius: 37% 37% 34% 34%/70% 70% 33% 33%;
}
3. 火焰的白黃紅三層結(jié)構(gòu)盒陰影實現(xiàn)
火焰白黃紅三層結(jié)構(gòu)是CSS3 box-shadow實現(xiàn)的，離不開box-shadow第4個數(shù)值參數(shù) – 擴展。實際上，這種效果原理并不難理解，就是幾圈光影效果疊加，難的是效果的調(diào)試，比方說這個火焰，至少調(diào)了一個小時，還不是非常滿意，只能說還行，只怪自己小時候蠟燭燃燒觀察得還不夠。

.candle-flame {
    width: 10px; height: 20px;
    box-shadow: 0 -8px 8px 4px #fff, 0 -15px 15px 12px #ff0, 0 -15px 0 14px #f00;
}
4. 煙霧實際上是一些徑向漸變的元素
煙霧實際上是一些使用徑向漸變繪制的元素，然后按照時間差，左右左右往上移動，同時體積變大，透明度變淡。

實際上，最簡便的方法是使用CSS3 filter中的高斯模糊blur()濾鏡實現(xiàn)最簡單，但是，在Chrome瀏覽器下，和動畫一起執(zhí)行的時候，右側(cè)和底部會出現(xiàn)殘影，這個渲染bug真的很難容忍，于是曲線救國，采用徑向漸變實現(xiàn)一個圓圓的糊糊的效果。

默認的徑向漸變是貼向遠邊的，因此，想要實現(xiàn)一個從有顏色到透明的圓還是需要closest-side這個關(guān)鍵字幫忙的：

.candle-smoke span {
    width: 18px; height: 18px;
    background-image: radial-gradient(closest-side circle, rgba(0,0,0,.75), rgba(0,0,0,.6), rgba(0,0,0,.4), rgba(0,0,0,0));
}
徑向漸變?nèi)腴T可以參考我這篇文章：“CSS3徑向漸變語法及輔助理解案例10則”

三、結(jié)束語
類似這種CSS3效果的實現(xiàn)，大部分時間不是花在想清楚實現(xiàn)思路，而是調(diào)效果上，調(diào)啊調(diào)，Chrome瀏覽器下又有比較多渲染問題，尤其多個CSS3屬性一起使用的時候，問題避免不了還要想另外的實現(xiàn)，大把時間就流逝掉了。

責任編輯：中山網(wǎng)站建設(shè)
 【網(wǎng)訊網(wǎng)絡】國家高新技術(shù)企業(yè)》十一年專注軟件開發(fā)，網(wǎng)站建設(shè)，網(wǎng)頁設(shè)計，APP開發(fā)，小程序，微信公眾號開發(fā)，定制各類企業(yè)管理軟件（OA、CRM、ERP、OMS訂單管理系統(tǒng)、WMS進銷存管理軟件等)！服務熱線：0760-88610046、13924923903，http://m.denorpool.com