上次我們了解了一些css濾鏡的基礎知識，css濾鏡 filter屬性
這次我們就來用css的濾鏡實現乙個 火焰的效果。
解釋要實現上面的火焰效果，我們先來了解一些必要的東西。
上次我們說過兩個濾鏡，blur 和 contrast。
blur 是給影象設定高斯模糊， contrast 是調整影象的對比度， 他們一起使用程式設計客棧會產生融合的效果。
效果圖圖中 紅色背景 設定了filter:contrast(20);這點很重要，程式設計客棧兩個圓設定了filter:blur(10px);如果還不清楚，我們對比看看。
好的知道這些，我們開始實現火焰效果吧。
大致需要這 3 步：
1、先用邊框畫出三角形
要知道，如果 width是0，height也是0，只用邊框的話，邊框是三角形的，我們看看 width 和 height 都是0的，但邊框寬度是100px的元素的樣子
上圖，4邊的邊框顏色是不一樣的，我們很清楚的看見了4個三角形，我們現在需要下面這樣乙個東西，相信大家知道怎麼實現了。
2、調整三角形的大小與顏色，實現類似火焰的樣子
這一步很簡單，我們只需要在上面已經實現的三角形上加這三行**
border-radius: 45%;
transform: scalex(.4);
filter: blur(20px) contrast(30);
效果圖3、讓火焰動起來
這一步算是比較麻煩的了，不過也很好理解，就是利用上面提到的融合效果，讓許多小圓隨機的穿過這個三角形就可以了，看看下面這張圖，就能理解原理。
好的，理解這些看**絕對很容易了。
完成**
總結這次，說的火焰效果就結束了，css的濾鏡當然還能實現其他更有趣的效果，那就等大家自己去探索了。
本文標題: 通過css的濾鏡實現火焰效果的示例
本文位址:
CSS的濾鏡效果 1
能 濾鏡.濾鏡可以針對圖形或者文本來增添一些效果.如果在搭配之前所寫的定位以及文字的性質.可以在不使用圖檔的情況下.讓網頁有很棒的效果，而且瀏覽又快速.css的濾鏡大概有14種.較常以套用在 等卷標上 先介紹幾種濾鏡 alpha 濾鏡 設定性質 opacity 透明度 開始 0 100 finish...
css3簡單實現火焰效果
這是乙個簡單用css div布局實現的火焰效果，在網上看到覺得挺有趣，也比較美觀，所以模仿一下。這裡沒有用任何的js 僅用css動畫等相關技術就可以實現。這裡是html結構 這裡是css樣式 flame 火焰效果，用簡單div實現 flame div nth child n 6 flame div ...
CSS濾鏡實現的顏色漸變翻轉效果
一下是利用css濾鏡效果實現漸變翻轉的 有需要的朋友可以參考下。複製 如下 document class ddf 轉著好玩 c程式設計客棧ss中transform rotate 360deg 旋轉，預設順時針旋轉引數為度數例如 360deg transition property 過濾，後面接需要過...