這篇文章主要介紹了如何使用純CSS實(shí)現(xiàn)直立的紅燭、跳動(dòng)的火焰，騰起的煙霧效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
目前創(chuàng)新互聯(lián)建站已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、拜泉網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
參見下面MP4視頻效果：
主要三部分：直立的紅燭、跳動(dòng)的火焰，騰起的煙霧，這三部分都是純CSS實(shí)現(xiàn)的。
主要應(yīng)用CSS3的線性漸變linear-gradient，徑向漸變radial-gradient，盒陰影box-shadow，圓角border-radius，變換transform以及動(dòng)畫animation實(shí)現(xiàn)。
親身體驗(yàn)，您可以狠狠地點(diǎn)擊這里：純CSS3實(shí)現(xiàn)蠟燭、火焰和煙霧demo
點(diǎn)擊蠟燭可以熄滅火焰，也可以點(diǎn)燃火焰，實(shí)現(xiàn)的源代碼在demo頁面上。
上圖這個(gè)圓弧效果直接使用CSS3的border-radius可以實(shí)現(xiàn)，但并不是簡單設(shè)置一個(gè)數(shù)值，因?yàn)檫@種效果的水平圓角和垂直圓角是不一樣的，具體設(shè)置如下：
重慶分公司
重慶分公司
.candle-body {
width: 40px; height: 120px;
border-radius: 0 0 40px 40px/0 0 16px 16px;
}border-radius斜杠前面的是水平圓角大小，斜杠后面4個(gè)值是垂直圓角大小，深入介紹可參考我之前寫的文章：“秋月何時(shí)了，CSS3 border-radius知多少？”。
這篇文章中有個(gè)demo，可以用來調(diào)試各種圓角效果，實(shí)時(shí)呈現(xiàn)，省掉各種腦補(bǔ)圓角效果的痛苦，例如，底部弧形效果參數(shù)這樣：
火焰的形狀也是圓角實(shí)現(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%;
}火焰白黃紅三層結(jié)構(gòu)是CSS3 box-shadow實(shí)現(xiàn)的，離不開box-shadow第4個(gè)數(shù)值參數(shù) – 擴(kuò)展。實(shí)際上，這種效果原理并不難理解，就是幾圈光影效果疊加，難的是效果的調(diào)試，比方說這個(gè)火焰，至少調(diào)了一個(gè)小時(shí)，還不是非常滿意，只能說還行，只怪自己小時(shí)候蠟燭燃燒觀察得還不夠。
.candle-flame {
width: 10px; height: 20px;
box-shadow: 0 -8px 8px 4px #fff, 0 -15px 15px 12px #ff0, 0 -15px 0 14px #f00;
}煙霧實(shí)際上是一些使用徑向漸變繪制的元素，然后按照時(shí)間差，左右左右往上移動(dòng)，同時(shí)體積變大，透明度變淡。
實(shí)際上，最簡便的方法是使用CSS3 filter中的高斯模糊blur()濾鏡實(shí)現(xiàn)最簡單，但是，在Chrome瀏覽器下，和動(dòng)畫一起執(zhí)行的時(shí)候，右側(cè)和底部會(huì)出現(xiàn)殘影，這個(gè)渲染bug真的很難容忍，于是曲線救國，采用徑向漸變實(shí)現(xiàn)一個(gè)圓圓的糊糊的效果。
默認(rèn)的徑向漸變是貼向遠(yuǎn)邊的，因此，想要實(shí)現(xiàn)一個(gè)從有顏色到透明的圓還是需要closest-side這個(gè)關(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));
}感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用純CSS實(shí)現(xiàn)直立的紅燭、跳動(dòng)的火焰，騰起的煙霧效果”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
