仓酷云

标题: 来谈谈：用CSS和jQuery制造霓虹效果 [打印本页]

作者: 逍遥一派 时间: 2015-1-15 23:18
标题: 来谈谈：用CSS和jQuery制造霓虹效果
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站。
破洛洛文章简介：用CSS和jQuery制造霓虹效果.
明天我们为人人筹办的JS+CSS霓虹灯效果，让你的笔墨像灯一样每分每秒都变色。
明天我们要用CSS和jQuery制造霓虹效果。如今我们入手下手第一步，制造一个背景。个中有2个分歧色彩的笔墨版本。
要天生五彩缤纷的背景图像，您起首必要新建的Photoshop文件650px和300px文档，#141414的背景色彩。利用您喜好的字体写您的题目。我利用了哥特式的世纪与60px的巨细。
然后Ctrl点击他，酿成选区。

利用矩形工具，按Shift+Alt选择文本，以下图：

然后复制出一个新的图层：
[attach]292050[/attach]在器具条利用突变工具，选上你喜好的色彩，可是每一个词的色采最好纷歧样，以下图：

在完成的题目，上面的副本，正本和使用一组分歧的色彩突变。对齐两个以上的其他丰厚多彩的题目，使它很简单经由过程它们之间的转换，供应了一个复杂的背景图片在CSS的就能够了。

文章上面有源文件下载
Step2–XHTML

XHTML标注是真正地复杂的，您必要举办背景的二个版本的容器(#neonTextH1)。
demo.html

12345

复制代码

<h1id="neonText">NeonTextEffectWithjQuery&CSS.<spanclass="textVersion"id="layer1"></span><spanclass="textVersion"id="layer2"></span></h1>

复制代码

Layer1显现在layer2下面，而且下降它的不通明将形成平滑的霓虹抖擞影响，间距的背景图像在它之下的褪色进意见。
seo的缘故原由，我们也供应图象的纯文本内容。它是从视图中埋没的整齐与负文本缩进。
Step3–CSS

制造款式，2张图象是分隔的，我们经由过程CSS界说2个图的地位，让他们显现在下面，大概上面。
styles.css

12345678910111213141516171819202122232425262728

复制代码

/*Thetwotextlayers*/#neonTextspan{width:700px;height:150px;position:absolute;left:0;top:0;background:url(img/text.jpg)no-repeatlefttop;}span#layer1{z-index:100;}span#layer2{background-position:leftbottom;z-index:99;}/*Theh1tagthatholdsthelayers*/#neonText{height:150px;margin:180pxauto0;position:relative;width:650px;text-indent:-9999px;}

复制代码

#neonText款式设置绝对地位，从而使他相对定位显现在顶部，还要注重笔墨缩进，我们事iyongd是埋没款式内容
Step4–jQuery

最初一步制造过渡动画。因为我们利用jQuery库（我们在统一个剧本标签页包含）。
script.js

1234567891011121314

复制代码

viewsourceprint?01$(document).ready(function(){setInterval(function(){//Selectingonlythevisiblelayers:varversions=$(.textVersion:visible);if(versions.length<2){//Ifonlyonelayerisvisible,showtheother$(.textVersion).fadeIn(800);}else{//Hidetheupperlayerversions.eq(0).fadeOut(800);}},1000);});

复制代码

声了然的函数setInterval没一秒都实行一次，并显现大概埋没和第一个图互换。
效果预览文件下载
</p>
一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。

作者: 爱飞 时间: 2015-1-17 21:44
以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

作者: 谁可相欹 时间: 2015-1-22 18:44
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: 蒙在股里 时间: 2015-1-31 12:50
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

作者: 只想知道 时间: 2015-2-6 19:50
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

作者: 兰色精灵 时间: 2015-2-18 11:49
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 灵魂腐蚀 时间: 2015-3-6 07:41
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

作者: 若相依 时间: 2015-3-12 23:12
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

作者: 小女巫 时间: 2015-3-20 05:44
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

欢迎光临仓酷云 (http://ckuyun.com/)