用CSS和jQuery制作霓虹效果

网络整理 - 07-27

今天我们为大家准备的JS+CSS霓虹灯效果,让你的文字像灯一样每一分每一秒都变色。

今天我们要用CSS和jQuery制作霓虹效果。现在我们开始第一步,制作一个背景。其中有2个不同颜色的文字版本。
要生成五颜六色的背景图象,您首先需要新建的Photoshop文件650px和300px文档,#141414的背景颜色。 使用您喜爱的字体写您的标题。 我使用了哥特式的世纪与60px的大小。
然后Ctrl点击他,变成选区。

使用矩形工具,按Shift+Alt选择文本,如下图:

然后复制出一个新的图层:

文章下面有源文件下载

Step 2 – XHTML

XHTML标注是真正地简单的,您需要举行背景的二个版本的容器(#neonText H1)。

demo.html

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

Layer1显示在layer2上面,并且降低它的不透明将造成光滑的霓虹焕发影响,间距的背景图象在它之下的退色入看法。

搜索引擎优化的原因,我们也提供图像的纯文本内容。 它是从视图中隐藏的整洁与负文本缩进 。

Step 3 – CSS

制作样式,2张图像是分开的,我们通过CSS定义2个图的位置,让他们显示在上面,或者下面。

styles.css

12345678910111213141516171819202122232425262728  span spanbottom 

#neonText样式设置相对位置,从而使他绝对定位显示在顶部,还要注意文字缩进,我们事iyongd是隐藏样式内容

Step 4 – jQuery

最后一步制作过渡动画。 由于我们使用jQuery库(我们在同一个脚本标签页包括)。

script.js

1234567891011121314 view sourceprint?setIntervalversions versions$fadeInversionsfadeOut

声明了的函数setInterval没一秒都执行一次,并显示或者隐藏和第一个图交换。

效果预览 文件下载