如何使用純CSS實現(xiàn)直立的紅燭、跳動的火焰，騰起的煙霧效果

這篇文章主要介紹了如何使用純CSS實現(xiàn)直立的紅燭、跳動的火焰，騰起的煙霧效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

一、效果搶先預(yù)覽

參見下面MP4視頻效果：

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

主要應(yīng)用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ù)這樣：

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));
}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何使用純CSS實現(xiàn)直立的紅燭、跳動的火焰，騰起的煙霧效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!