用CSS和jQuery製作霓虹效果

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

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

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

然後複製出一個新的圖層：

在用具條使用漸層工具，選上你喜歡的顏色，但是每個詞的色彩最好不一樣，如下圖：

在完成的標題，下面的正本，副本和應用一組不同的色彩坡形。對齊兩個以上的其他豐富多彩的標題，使它很容易通過它們之間的轉換，提供了一個簡單的背景圖片在CSS的就可以了。

文章下面有源檔案下載

Step 2 – XHTML

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

demo.html

12345

<h1 id="neonText"> Neon Text Effect With jQuery & CSS. <span class="textVersion" id="layer1"></span> <span class="textVersion" id="layer2"></span> </h1>

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

搜尋引擎最佳化的原因，我們也提供映像的純文字內容。 它是從視圖中隱藏的整潔與負文本縮排 。

Step 3 – CSS

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

styles.css

12345678910111213141516171819202122232425262728

/* The two text layers */#neonText span{width:700px;height:150px;position:absolute;left:0;top:0;background:url("img/text.jpg") no-repeat left top;} span#layer1{z-index:100;} span#layer2{background-position:left bottom;z-index:99;} /* The h1 tag that holds the layers */ #neonText{height:150px;margin:180px auto 0;position:relative;width:650px;text-indent:-9999px;}

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

Step 4 – jQuery

最後一步製作過渡動畫。 由於我們使用jQuery庫（我們在同一個指令碼標籤頁包括）。

script.js

1234567891011121314

view sourceprint?01 $(document).ready(function(){ setInterval(function(){ // Selecting only the visible layers: var versions = $(".textVersion:visible"); if(versions.length<2){ // If only one layer is visible, show the other $(".textVersion").fadeIn(800); } else{ // Hide the upper layer versions.eq(0).fadeOut(800); } },1000); });

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

效果預覽 檔案下載