文字在背景上的特效.doc

网页来自于/blog/static/288418200822441450294/学习HTML语言笔记（一）：文字特效处理2008-03-24 16:14:50|分类： html-课堂 |标签： |字号大中小订阅 在学习HTML文字特效处理之前，应该先阅读：HTML语言剖析 对于不熟悉洋文的人来说，HTML确实难。但只要你有悟性、有恒心，静下心来慢慢学，对每个问题琢磨琢磨、捣鼓捣鼓，肯定能学会。 下面一步一步来： 1、写字：点日志-写日志-全部功能-进入HTML编辑状态。写你要展现的字，如：欢迎您光临老虎的博客！ 2、确定字体： FONT表示文字的属性； face表示字体；即 欢迎您光临老虎的博客！“=”号后填选择的字体，你想选什么字体，就填什么字体； 这个尖括号“”,是不能省掉的，而且代码必须写在这个尖括号之内。 3、确定文字大小： size表示字的大小，即： 欢迎您光临老虎的博客！“5”是取的值，可以变化，数字越大字越大。 4、确定文字颜色：color表示颜色；颜色的代码为：# xxxxxx。 代码是：color=#ff0000 即： 欢迎您光临老虎的博客！另外需熟记的几个颜色代码：红色：ff0000 绿色：00ff00蓝色：0000ff 黑色：000000白色：ffffff 要记住：颜色代码编入HTML语言中时可别忘了写“#”。其它颜色代码请参看：颜色代码表 预览一下，看是不是红色： 欢迎您光临老虎的博客！ 5、文字加粗：好，红色字显示出来了，但有点瘦。在用WODE处理中文时我们用“B”可使文字丰满。试试： 欢迎您光临老虎的博客！。再加上文字属性结束符号就变为： 欢迎您光临老虎的博客！ 看看效果： 欢迎您光临老虎的博客！ 6、移动文字：文字丰满了，如果能移动不更漂亮吗？ 好办，就在所有代码的前面加一个移动代码， 再在所有代码和文字的最后加一个移动代码 ,注意多了一个“/” 。即： 欢迎您光临老虎的博客！ 看看效果： 注意两点；一是这个移动代码默认向左移动；二是要点右上角“预览”才能动起来。移动 属性如下： direction=移动方向可选值为向上(up)向下(down)向左(left)向右(right) 向右移动： 欢迎您光临老虎的博客！ 左右来回移动： 欢迎您光临老虎的博客！ 向上移动： 欢迎您光临老虎的博客！ 向下移动： 欢迎您光临老虎的博客！ 上下来回移动： 欢迎您光临老虎的博客！ 注意：使用“direction=up behavior=alternate”也可得此效果。 7、调整移动速度： 代码是:scrollamount=1 “1”是可变值，数值越大越快。这个代码加在哪里？因为它是属于移动这一属性的，所以就要写在移动代码一起。即： 欢迎您光临老虎的博客！ 看看效果： 8、调整文字位置：那就加一个表示位置的代码： 表示字体居中 表示字体居左 表示字体居右即： 欢迎您光临老虎的博客！注意：这一位置代码不能和FONT这一属性的写在一起，因为不是同一属性，只能另放在FONT.这一属性的前面。看看效果吧!是不是居中了.？ 9、走走停停文字设置： 基本语法： 插入文字即： 欢迎您光临老虎的博客！ 效果： 10、跳跃式移动（即上下来回移动+左右来回移动）：插入文字 上下来回移动代码： 左右来回移动代码： red：红色看看效果吧: 11、上下两行文字相向移动：插入文字插入相反的文字 上行文字代码：插入文字 下行文字代码：插入相反的文字 提醒：在用这种效果时，文字移动范围的宽width的取值很重要，两段文字移动范转的width取值和一定要小于背景层width的取值。效果如下： 12、由中间向两边移动文字：在上例11中取掉上下行中间的“”，就可变为在同一水平线上由中间向两边移动的文字。为了美观，再在文字前加个图片，即为：欢迎您光临老虎的博客！客博的虎老临光您迎欢效果漂亮吧？ 由两边向中间移动文字：！客博的虎老临光您迎欢欢迎您光临老虎的博客！ 13、原地跳动文字基本语法：原地跳动文字 14、交替跳跃文字基本语法：老虎欢迎您！ 15、右向左上下起伏飞翔基本语法：填写文字 右向左上下起伏飞翔，height=100 是上下起伏飞翔幅度，可以调整，区分图片大小，一般设置在50至150的范围内比较好 16、左向右上下起伏飞翔文字基本语法： !去回快 左向右上下起伏飞翔， height=200 是上下起伏飞翔幅度，可以调整，区分图片大小，一般设置在50至150的范围内比较好。 17、原地跳高跳低基本语法：老虎祝您永远幸福/FONT 18、设置大字体的文字： （1）、基本语法： 插入文字 （2）、属性如下： font:30pt数值越大文字就越大 （3）、效果： 相逢是缘 相思是福 19、彩色字体基本语法： 彩色文字色彩 斑斓 代码说明：是用作重点强调的，其文本通常以粗体显示。看看效果吧！彩色文字色彩斑斓 20、文字阴影、投影效果：(1)、文字阴影效果：文字内容 说明：FILTER: shadow滤镜效果是沿对象边缘产生阴影。文字阴影效果 抛射字体基本语法：抛射字体 看看效果吧!老虎欢迎您 (2)、文字定点投影效果：文字内容 说明： FILTER: dropshadow滤镜可使对象在指定的方向和位置上产生阴影。阴影相对于对象的位置可通过offx和offy来设定。文字定点投影效果 文字浮雕效果：文字浮雕效果 文字浮雕效果 （3）、投影字体效果：文字内容 说明：FILTER: blur滤镜可使对象在指定的方向和位置上产生动感模糊效果。font-weight为文字浓淡粗细属性，可用normal、bold、bolder、light、lighter及数值100-900来表示。投影字体效果 文字模糊效果：文字模糊效果 文字模糊效果 立体镂空字基本语法:老虎老虎欢迎您！21、日志美术字： （1）、日志美术字 日志美术字（2）、 日志美术字 日志美术字 （3）、日志美术字日志美术字（4）、日志美术字 日志美术字 （5）、日志美术字 日志美术字（6）、日志美术字 日志美术字（7）、日志美术字 日志美术字 （8）、日志美术字 日志美术字（9）、日志美术字日志美术字 22、带背景色文字效果： 文字内容说明：font-family为字体属性，font-size为文字大小属性。加上背景色效果 23、文字反转效果： (1)、左右反转效果：文字内容 说明：FILTER: FlipH表示沿水平方向翻转对象的滤镜效果。文字左右反转 (2)、上下反转效果：文字内容 说明：FILTER: FlipV表示沿垂直方向翻转对象的滤镜效果。 文字上下反转 (3、)倒影字效果：倒影代码倒影代码 倒影代码倒影代码 老虎的倒影代码老虎的倒影代码老虎的倒影代码老虎的倒影代码24、空心字效果：文字内容 说明：空心字是用滤镜glow、mask、chroma组合，mask和chroma的颜色要相同，这个颜色决定了字体的颜色。空心字效果 25、阴、阳文字效果： (1）、阴文字效果：文字内容 说明：阴文字是用滤镜mask，shadow，chroma组合。字体的颜色由shadow决定，mask和chroma的颜色要相同，色彩任意。阴文字效果 (2)、阳文字效果：文字内容 说明：阳文字是用滤镜mask，dropshadow，chroma组合。mask和chroma的颜色相同，色彩由dropshadow决定。阳文字效果 26、齿边字效果；文字内容 说明：齿边字是用滤镜glow，mask组合，mask的颜色决定字体的颜色。齿边字效果 27、文字光晕效果：文字内容 说明：strength表示光晕强度文字光晕效果 28、文字透明、渐变效果：(1)、文字透明效果：文字内容 说明：opacity：表示文字起始透明度，有效范围是0-100；100是完全不透明，0是完全透明。 finishOpacity：表示文字结束透明度，有效范围是0-100；100是完全不透明，0是完全透明。 style：表示文字滤镜样式，可更改等号后面参数：0-平均透明；1-线状渐变透明；2-圆形渐变透明；3-菱形(X形)渐变透明。 startx、startx、finishx、finishy分别表示文字滤镜效果的起始和结束位置。文字透明效果 (2)、文字渐变效果：文字内容 说明：LINE-HEIGHT: 为行间距。渐变效果变变!变!变! 29、文字波纹效果： (1)、文字波浪效果：文字内容 说明：add属性：布尔型，0或1，0表示将原始对象加入最后效果中，1则反之；freq属性：决定显示的频率，即应出现多少个波形；phrase属性：决定波形的形状，值取0至360之间；strength属性：决定波形的振幅(扭曲强度)。欢迎您光临的博客 (2)、文字扭曲效果：代码格式：与文字波浪效果的性质相同，均为同一种滤镜效果，只是参数设置不同罢了。扭曲文字效果扭曲文字效果 30、彩光闪动文字的基本语法： 老虎欢迎您的光临老虎欢迎您的光临 再作个火焰燃烧效果：老虎欢迎您的光临 老虎欢迎您！带背景的闪光字体（带背景的闪光字体）带背景的闪光字体 说明：实际上是使用了两层表格达到的效果。font-style为字体风格属性，font-variant为字体变量属性(这个属性有两个值，normal和small-caps，normal是缺省值)；font-weight为文字浓淡粗细属性。带背景的闪光字体博客代码尽在菜鸟玩博（彩虹字体） 博客代码尽在菜鸟玩博31、文字在图片上向上移动的基本语法：朋友您好！亲自动手！体验成功！其乐无穷！ 32、竖排渐出字基本语法： 我带着远古的心愿你怀揣前世的祈盼我饱含如许的虔诚你浸润最深的期待我们跨越万水千山赴今世的约定.你感觉我深情凝眸的甜柔我倾听你心室澎湃的跳动