html特效代码　文字光影特效及代码

html特效代码　文字光影特效及代码

 

文字光影效果实际是滤镜效果。本文介绍的内容有：阴影字、立体字、投影字和其他光影效果及代码。 1、阴影字配色比较容易一点，只要不与网页颜色相同或相近，字体可以是任何颜色，阴影颜色比字体颜色淡。 2、立体字其实也是阴影字，其效果是通过字体和阴影两种颜色对比来表现的，色差越大立体感越强。 3、投影字可以设置三种颜色，即字体颜色、发光颜色和投影颜色，通常发光颜色和投影颜色是相同的。投影字配色与发光字基本相似，您可以参照发光字体的方法给投影字配色。  阴影字 例1、 阴影字效果阴影字效果 代码： <CENTER><FONT style="COLOR:#DED687; FILTER: shadow(color=black); FONT-FAMILY: 宋体; FONT-SIZE: 24pt; LINE-HEIGHT:120%; WIDTH: 100%"><B>阴影字效果阴影字效果</B></FONT></CENTER> ------------------------------------------------------ 例2、 古诗一首  白居易 昔年八月十五夜，曲江池畔杏园边。 今年八月十五夜，湓浦沙头水馆前。 西北望乡何处是，东南见月几回圆。 昨风一吹无人会，今夜清光似往年。 代码： <table width="500px"  border="0" align="center" bgcolor="#E8E8FF"> <tr><td><p><FONT style="COLOR:#F24F00 ; FILTER: shadow(color=#ACACAC ); FONT-FAMILY: 隶书; FONT-SIZE: 24px; LINE-HEIGHT:150%;  WIDTH:100%"> <div align="center";><br>古诗一首  白居易 </div><div align="center"> 昔年八月十五夜，曲江池畔杏园边。 <br>今年八月十五夜，湓浦沙头水馆前。 <br>西北望乡何处是，东南见月几回圆。 <br>昨风一吹无人会，今夜清光似往年。 </div></FONT></p></td></tr></table>  立体字 例1、 立体字效果立体字效果 代码： <DIV align=center><FONT style="FONT-SIZE: 24pt; FILTER: shadow(color=green direction=45); WIDTH: 100%; COLOR: #FFCC00; LINE-HEIGHT: 150%; FONT-FAMILY: 仿宋_GB2312"><B>立体字效果立体字效果</B></FONT></p></DIV> ------------------------------------------------------ 例2、 立体字效果立体字效果 代码： <STRONG><p align=center><FONT style="FONT-SIZE:30pt; FILTER: shadow(color=#0000ee direction=225); WIDTH: 100%; COLOR: #ff0000; LINE-HEIGHT: 120%; FONT-FAMILY: 隶书">立体字效果立体字效果</FONT></p></STRONG>  投影字 例1、 投影字效果投影字效果 代码： <TABLE align=center > <DIV align=center> <DIV style="FILTER: glow(color=#ff0000 strength=8); WIDTH: 100%; COLOR: #ff00ff"; > <DIV style="FILTER: shadow(color=#ff0000, strength=25 direction=45); WIDTH: 600px; HEIGHT: 100px"> <FONT style="FONT-WEIGHT: normal; FONT-SIZE: 28pt; LINE-HEIGHT: 250%; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文新魏 color=#FFCCCC > 投影字效果投影字效果 </FONT></DIV></DIV></DIV></TABLE> ------------------------------------------------------ 例2、 投影字效果投影字效果 代码： <TABLE align=center > <DIV align=center> <DIV style="FILTER: glow(color=#0088FF strength=8); WIDTH: 100%; COLOR: #ff00ff"; > <DIV style="FILTER: shadow(color=#0088FF, strength=25 direction=135); WIDTH: 600px; HEIGHT: 100px"> <FONT style="FONT-WEIGHT: normal; FONT-SIZE: 28pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=隶书 color=#FFCCCC > 投影字效果投影字效果 </FONT></DIV></DIV></DIV></TABLE> ------------------------------------------------------ 例3、 投影字效果投影字效果 代码： <TABLE align=center > <DIV align=center> <DIV style="FILTER: glow(color=#9900CC strength=8); WIDTH: 100%; COLOR: #ff00ff"; > <DIV style="FILTER: shadow(color=#9900CC, strength=25 direction=225); WIDTH: 600px; HEIGHT: 100px"> <FONT style="FONT-WEIGHT: normal; FONT-SIZE: 28pt; LINE-HEIGHT: 250%; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文新魏 color=#FFCCCC > 投影字效果投影字效果 </FONT></DIV></DIV></DIV></TABLE> ------------------------------------------------------ 例4、 投影字效果投影字效果 代码： <TABLE align=center > <DIV align=center> <DIV style="FILTER: glow(color=#FF00FF strength=8); WIDTH: 100%; COLOR: #ff00ff"; > <DIV style="FILTER: shadow(color=#FF00FF, strength=25 direction=315); WIDTH: 600px; HEIGHT: 100px"> <FONT style="FONT-WEIGHT: normal; FONT-SIZE: 28pt; LINE-HEIGHT: 250%; FONT-STYLE: normal; FONT-VARIANT: normal" face=隶书 color=#FFCCCC > 投影字效果投影字效果 </FONT></DIV></DIV></DIV></TABLE>  文字其他光影效果 例1、倒影字 倒影字效果倒影字效果 倒影字效果倒影字效果 代码： <DIV align=center><FONT SIZE=5 style="WIDTH: 100%; COLOR:#ff0000; LINE-HEIGHT: 90%; FONT-FAMILY: 黑体"><br><b>倒影字效果倒影字效果</b></FONT><FONT SIZE=5 style="FILTER: FlipV; WIDTH: 100%; COLOR:#ff9999; LINE-HEIGHT: 90%; FONT-FAMILY:黑体"><b>倒影字效果倒影字效果</b></FONT></DIV> ----------------------------------------------------- 例2、重影字 重影字效果重影字效果 代码： <DIV align=center><FONT style="FONT-SIZE: 22pt; FILTER: dropshadow(color=#00aa88,offX=4,offY=-2,Positive=true); WIDTH: 100%; COLOR: #FF0000; LINE-HEIGHT: 150%; FONT-FAMILY:黑体"><B>重影字效果重影字效果</B></FONT></DIV> ------------------------------------------------------ 例3、左右翻转 左右翻转效果左右翻转效果 代码： <DIV align=center> <FONT face=楷体_GB2312 color=00FF00 size=6><font style="filter:FlipH;height:8pt;">左右翻转效果</font>左右翻转效果</DIV> 附：用滤镜不仅能制成发光文字，而且还能制成发光图片，使图片边缘产生光影效果。这里只举三个例子： 例1、给图片加发光的边框 代码： <div margin-top:0px; style="width:100%; font-size:80px;  filter: glow(color=#0000FF, strength=30);"> <p align="center"><br> <IMG src="http://image48.360doc.com/DownloadImg/2011/12/1922/20154378_1.jpg"></p></div>  例2、给图片加投影（或图片立体效果） 代码： <TABLE align=center ><DIV align=center> <DIV style="FILTER: glow(color=#00FF00 strength=6); WIDTH: 100%; COLOR: #ff00ff"; > <DIV style="FILTER: shadow(color=#00FF00, strength=20 direction=45); WIDTH: 600px; HEIGHT: 10px"> <FONT style="FONT-WEIGHT: normal; FONT-SIZE: 28pt; LINE-HEIGHT: 100%; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文新魏 color=#FFCCCC > <br><IMG src="http://image48.360doc.com/DownloadImg/2011/12/1922/20154378_2.jpg"> </FONT></DIV></DIV></DIV></TABLE> 例3、仿制宫灯效果            代码： <div style="width:100%; font-size:40px; line-height:120%; filter: glow(color=#FF0000, strength=20); height:125"> <br><p align="center"> <IMG src=http://image48.360doc.com/DownloadImg/2011/12/1922/20154378_3.jpg">     <IMG src="http://image48.360doc.com/DownloadImg/2011/12/1922/20154378_4.jpg">     <IMG src="http://image48.360doc.com/DownloadImg/2011/12/1922/20154378_5.jpg">    <IMG src="http://image48.360doc.com/DownloadImg/2011/12/1922/20154378_6.jpg"> </div>