武林網(www.survivalescaperooms.com)文章簡介：用CSS和jQuery制作霓虹效果.

今天我們為大家準備的JS+CSS霓虹燈效果，讓你的文字像燈一樣每一分每一秒都變色。

今天我們要用CSS和jQuery制作霓虹效果。現在我們開始第一步，制作一個背景。其中有2個不同顏色的文字版本。
要生成五顏六色的背景圖象，您首先需要新建的Photoshop文件650px和300px文檔，#141414的背景顏色。 使用您喜愛的字體寫您的標題。 我使用了哥特式的世紀與60px的大小。
然后Ctrl點擊他，變成選區。

使用矩形工具，按Shift+Alt選擇文本，如下圖：

然后復制出一個新的圖層：

XHTML標注是真正地簡單的，您需要舉行背景的二個版本的容器(#neonText H1)。

12345Neon Text Effect With jQuery idspanidspan> </h1>

Layer1顯示在layer2上面，并且降低它的不透明將造成光滑的霓虹煥發影響，間距的背景圖象在它之下的退色入看法。

搜索引擎優化的原因，我們也提供圖像的純文本內容。 它是從視圖中隱藏的整潔與負文本縮進 。

制作樣式，2張圖像是分開的，我們通過CSS定義2個圖的位置，讓他們顯示在上面，或者下面。

12345678910111213141516171819202122232425262728 span spanbottom /* The h1 tag that holds the layers */ 

#neonText樣式設置相對位置，從而使他絕對定位顯示在頂部，還要注意文字縮進，我們事iyongd是隱藏樣式內容

最后一步制作過渡動畫。 由于我們使用jQuery庫（我們在同一個腳本標簽頁包括）。

1234567891011121314view sourceprint?setIntervalversions versions$fadeInversionsfadeOut

聲明了的函數setInterval沒一秒都執行一次，并顯示或者隱藏和第一個圖交換。

效果預覽 文件下載