武林網(www.49028c.com)文章簡介：用CSS和jQuery制作霓虹效果.
今天我們為大家準備的JS+CSS霓虹燈效果，讓你的文字像燈一樣每一分每一秒都變色。
今天我們要用CSS和jQuery制作霓虹效果?，F在我們開始第一步，制作一個背景。其中有2個不同顏色的文字版本。
要生成五顏六色的背景圖象，您首先需要新建的Photoshop文件650px和300px文檔，#141414的背景顏色。 使用您喜愛的字體寫您的標題。 我使用了哥特式的世紀與60px的大小。
然后Ctrl點擊他，變成選區。
使用矩形工具，按Shift+Alt選擇文本，如下圖：
然后復制出一個新的圖層：
XHTML標注是真正地簡單的，您需要舉行背景的二個版本的容器(#neonText H1)。
demo.html12345Neon Text Effect With jQuery idspanidspan> </h1>
Layer1顯示在layer2上面，并且降低它的不透明將造成光滑的霓虹煥發影響，間距的背景圖象在它之下的退色入看法。
搜索引擎優化的原因，我們也提供圖像的純文本內容。 它是從視圖中隱藏的整潔與負文本縮進 。
Step 3 – CSS制作樣式，2張圖像是分開的，我們通過CSS定義2個圖的位置，讓他們顯示在上面，或者下面。
styles.css12345678910111213141516171819202122232425262728 span span
bottom /* The h1 tag that holds the layers */#neonText樣式設置相對位置，從而使他絕對定位顯示在頂部，還要注意文字縮進，我們事iyongd是隱藏樣式內容
Step 4 – jQuery最后一步制作過渡動畫。 由于我們使用jQuery庫（我們在同一個腳本標簽頁包括）。
script.js1234567891011121314view sourceprint?setIntervalversions versions$fadeInversionsfadeOut
聲明了的函數setInterval沒一秒都執行一次，并顯示或者隱藏和第一個圖交換。
效果預覽 文件下載
新聞熱點
疑難解答
