人們很難想象一種像火一樣吸引注意力的自然（或人為）現(xiàn)象。你看到它，不能把目光移開。也許它與舊的戰(zhàn)斗或逃跑反應(yīng)有關(guān)？

但這不僅僅是自然界注意到的。長期以來，網(wǎng)絡(luò)一直是火熱的GIF和各種嘗試以數(shù)字方式重現(xiàn)效果的家園。隨著技術(shù)的進(jìn)步，火災(zāi)的渲染效果也在不斷提高。

因此，現(xiàn)在似乎是一個(gè)深入了解CodePen檔案以了解開發(fā)人員如何使用火焰的好時(shí)機(jī)。以下是一些最有趣的例子。有些是超現(xiàn)實(shí)的; 其他人有點(diǎn)抽象。他們都有一個(gè)共同點(diǎn)是能夠引起用戶的注意。讓我們開始吧！

SVG on Fire

近年來，SVG在動畫中的應(yīng)用呈爆炸式增長。將矢量圖形的清晰度與運(yùn)動相結(jié)合是非常有吸引力的 - 它在這個(gè)片段中全面展示。類似篝火的效果看起來類似于使用玻璃紙而不是真正的火焰的人造壁爐。運(yùn)動是自然的，微小的火花是一個(gè)額外的好處。

 

有趣的火焰

這個(gè)用純CSS創(chuàng)建的例子讓人聯(lián)想到圖形均衡器。在這里，三層火焰由彩色條形圖表示，它們有節(jié)奏地上下跳躍。盡管如此，遠(yuǎn)非現(xiàn)實(shí)，但有趣。

強(qiáng)風(fēng)中的蠟燭

如果你正在尋找更現(xiàn)實(shí)的東西，這種由JavaScript驅(qū)動的閃爍火焰是一個(gè)不錯(cuò)的選擇。它不僅具有點(diǎn)燃蠟燭燈芯的合法外觀，還有全屏發(fā)光。但是，為了在網(wǎng)站上有效使用，可能需要放慢運(yùn)動速度。

熱門標(biāo)志

當(dāng)我們想到火焰效果時(shí)，我們的第一個(gè)想法可能是壓倒性的視覺效果。但是，這個(gè)動畫標(biāo)志的情況也很有效。在這里，效果為復(fù)古風(fēng)格的構(gòu)圖增添了一絲現(xiàn)代感。

就像火焰效果一樣，8位像素圖形似乎在網(wǎng)上找到了永久的家。它們簡單，像素化的外觀既有趣又是對經(jīng)典視頻游戲的極好提醒。這個(gè)片段展示了兩種在光榮和諧中融合在一起的效果。乍一看，一條火線消失了。然后你意識到火焰也附著在光標(biāo)移動上。當(dāng)你四處走動時(shí)，火隨之而來。完全拉！

在太空中飛行

很難相信這種帶有火焰的天空效果只是用HTML和CSS制作的。但它展示了無縫背景和一些動作的可能性。確實(shí)是變形速度。

這是泡泡

這不是你傳統(tǒng)的篝火。相反，它似乎更像液體（或者甚至可能像鬼一樣）。盡管如此，這將非常適合那些更多依靠插圖講述故事的網(wǎng)站。運(yùn)動是微妙的，盡管外觀的獨(dú)特性，仍然可識別。

時(shí)間靜止

這是一個(gè)不同的火上澆油。擁有橙色和黃色火焰的全寬背景可能有點(diǎn)過于激烈。這個(gè)片段提供了一個(gè)很好的選擇。火焰的靜止照片坐落在背景中，而數(shù)百個(gè)微小顆粒充當(dāng)火花，在它們周圍跳舞。效果值得注意。

當(dāng)然，火焰效果的使用并不適合每個(gè)網(wǎng)站。但是有很多潛在的用例。專注于特定主題的網(wǎng)站，如露營，戶外甚至可怕的故事都可能適合。你甚至可能會看到它在下一部大型動作片的官方網(wǎng)站上實(shí)現(xiàn)。

不僅如此，這些影響如何代表了技術(shù)的進(jìn)步。例如，我們集合中的一些純CSS示例可能需要功能強(qiáng)大的軟件才能在幾年前進(jìn)行復(fù)制。然后考慮與正確的JavaScript庫配對時(shí)這些效果的復(fù)雜程度。

因此，雖然火可能是我們世界上最古老的東西之一，但我們也可以用它來判斷我們的現(xiàn)在。