章鱼博客

与你共享

日志

关于我

章鱼

文章分类

文字的特效

2009-02-01 23:03:29| 分类：博客代码 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

文字的特效

用CSS样式表的滤镜属性语句，使文字产生立体阴影和光晕重叠等特殊效果，俗称特效文字。

代码（1）

<DIV align=center>
<DIV style="FILTER: shadow(color=#ff0000, strength=50); WIDTH: 500px">
<FONT style="FONT-WEIGHT: normal; FONT-SIZE: 60pt; LINE-HEIGHT: normal; FONT-STYLE: normal;

FONT-VARIANT: normal" face=华文行楷 color=#fff000>
一生何求</FONT></DIV></DIV>

说明：

style="FILTER: shadow 在文字的边外加阴影

(color=#ff0000 阴影颜色
strength=50 阴影强度取值0~100

WIDTH: 500px 改变此值宽度可变

FONT-SIZE: 60pt 改变此值字体大小可变

效果：

一生何求

代码（2）

<DIV align=center>
<div style="FONT-SIZE: 60pt; FILTER: shadow(color=#87CEFA, strength=30); WIDTH: 600px; HEIGHT:

80px"><FONT face=隶书 color=#1e90ff>心想事成</FONT></div></div>
效果：

心想事成

代码（3）

<DIV align=center>
<DIV style="FONT-SIZE: 60pt; FILTER: shadow(color=#af2dco); WIDTH: 100%; COLOR: #ff0000; LINE-

HEIGHT: 150%">
<FONT style="FONT-FAMILY: 华文行楷">网络一线牵</DIV></DIV>

效果：

网络一线牵

代码（4）

<center>
<div style="FILTER: Glow(color=#0000ff,strength=12); HEIGHT: 6pt"><FONT style="FONT-SIZE: 60pt;FONT-FAMILY:

华文行楷; COLOR: #ffff00">大好河山</FONT></div>
</center>

说明：

<div style="FILTER: Glow Glow滤镜在文字的外边产生光辉效果

color=#0000ff 表示Glow滤镜光辉的颜色

strength=12 表示Glow滤镜光辉的强度，取值0~100

FONT-SIZE: 60pt 表示字号的大小，取值一般在20~80

华文行楷; COLOR: #ffff00 表示字体的颜色，可选择。

效果：

大好河山

代码（5）

<CENTER>
<div style="FONT-SIZE:70pt;filter:dropshadow(color=#ff0000,offX=5,offY=3,Positive=1);

WIDTH:100%; COLOR:#008000;LINE-HEIGHT:100%"><FONT style="FONT-SIZE:60pt;FONT-FAMILY:隶书">江山如此多娇</FONT>
</div>
</CENTER>

style="FONT-SIZE:70pt 表示文字的排列，改变数值文字的排列会上下移动

filter:dropshadow 表示dropshadow滤镜在文字外边产生重叠效果

color=#ff0000 表示dropshadow滤镜在文字外边产生的重叠效果颜色

offX=5 表示左右重叠效果，改变此值重叠效果会变化。负值重叠效果会在文字的左边产生、正值重叠效果会在文字的右边产生，值越大重叠效果也越大。

offY=3 表示上下重叠效果，改变此值重叠效果会变化。负值重叠效果会在文字的上边产生、正值重叠效果会在文字的下边产生，值越大重叠效果也越大。

Positive属性表示透明象素阴影。有二个值，1为透明、0为不透明

WIDTH:100% 改变此百分数，文字宽度会有变化。

COLOR:#008000 表示文字的颜色，可选择。

LINE-HEIGHT:100% 改变此百分数，文字高度会有变化。

FONT-SIZE:60pt 表示字体大小，数字越大字体也越大。

效果：

江山如此多娇

代码（6）

<CENTER>
<div style="FONT-SIZE:70pt;filter:shadow(color=darkcyan,direction=180);WIDTH:100%;

COLOR:#9932CC;LINE-HEIGHT:150%"><FONT style="FONT-SIZE:60pt;FONT-FAMILY:隶书">世界之窗</FONT>
</div></CENTER>

说明：

filter:shadow 表示shadow滤镜能使文字边上产生阴影效果

color=darkcyan 表示文字边上产生阴影效果的颜色

direction属性表示阴影角度，取值范围0~360度

效果：

世界之窗

代码（7）

<CENTER>
<DIV style="FONT-SIZE:60pt;filter:dropshadow(color=000066,offX=-5,offY=-3,Positive=1);WIDTH:100%; COLOR:#FF0000;LINE-HEIGHT:120%"><FONT style="FONT-FAMILY: 华文行楷">江山如此多娇</FONT></DIV> </CENTER>

说明：

FONT-SIZE:60pt 表示字号，值可选择，数字越大、字也越大。

文字阴影另一种格式，阴影偏离位置可变。

Offx:X轴偏离值，正值阴影偏右，负值阴影偏左。

Offy:Y轴偏离值，正值阴影偏下，负值阴影偏上。

Positive属性表示透明象素阴影。有二个值，1为透明、0为不透明。

效果：

江山如此多娇

代码（8）

<center>
<div style="FONT-SIZE:60pt;filter:wave

(add=0,lightstrength=30,strength=6,freq=3,phrase=50);WIDTH:100%; COLOR:brown;LINE-HEIGHT:150%">
<FONT style="FONT-FAMILY:华文行楷">飞流直下三千尺</FONT></div>
</center>

说明：

FONT-SIZE:60pt 表示字号，值可选择，数字越大、字也越大。

filter:wave 表示滤镜对过滤对象生成正弦波变形，造成一种变幻效果。

add=0 0表示将原始对象加入最后效果中，1则反之。

lightstrength=30 表示字体颜色会从上至下，有变化，值越大字体颜色变化越明显。

strength=6 表示波形的振幅，值越大波形的振幅也越强烈。

freq=3 表示显示的频率，即应出现多少个波形。

COLOR:brown 表示字体的颜色，可选择。

效果：

飞流直下三千尺

代码（9）

<center>
<DIV style="FILTER: glow(color=#ff0000 strength=16); WIDTH: 100%; "> <FONT style="FONT-SIZE:

60pt; FONT-FAMILY: 华文新魏" color=#FFF8DC>几度夕阳红</font></center>

说明：

FILTER: glow 表示能使文字边外产生辉光效果

color=#ff0000 表示文字边外产生辉光效果的颜色

strength=16 表示文字边外产生辉光效果的强度，值越大辉光强度也大。

color=#FFF8DC 表示文字的颜色，可选择。

效果：

几度夕阳红

用表格做的代码（1）

<TBODY>
<TR>
<TD style="FILTER: chroma(color=#ff0000">
<TABLE align=center bgColor=#ffffff>
<TBODY>
<TR>
<TD align=middle><FONT style="FONT-SIZE: 60pt" face=华文行楷 color=#ff0000>闪动的漂亮特效字

</FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

说明：

红色代码必须一致，否则图片地址的图片不能显示出来。

绿色代码是字体的背景颜色，颜色可以选择。

效果：

闪动的漂亮特效字

用表格做的代码（2）

<TABLE align=center background=图片地址(纯色图片或gif图片) border=0 bordercolor=#ffffff

cellSpacing=10 cellPadding=20>
<TBODY>
<TR>
<TD style="FILTER: mask(color=#ffffff)" align=middle><FONT style="FONT-SIZE: 60pt" face=隶书

color=#8A2BE2>一生何求歡迎您光臨</FONT>
</TD></TR></TBODY></TABLE>

说明：

红色代码表示字体的背景颜色，可选择、这里字体的背景颜色是白色。

蓝色代码表示字体大小，可选择，值越大字体也越大。

效果：

一生何求歡迎您光臨

评论这张

转发至微博

阅读(1163)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_085075084085088069081084084095093084085068084086084064',
              blogTitle:'文字的特效',
              blogAbstract:'  <TABLE title=\"平哥编辑-QQ:9027798\" style=\"BORDER-LEFT-COLOR: #832828; BORDER-BOTTOM-COLOR: #832828; BORDER-TOP-STYLE: ridge; BORDER-TOP-COLOR: #832828; BORDER-RIGHT-STYLE: ridge; BORDER-LEFT-STYLE: ridge; BORDER-COLLAPSE: collapse; BORDER-RIGHT-COLOR: #832828; BORDER-BOTTOM-STYLE: ridge;\"  cellSpacing=\"3\" cellPadding=\"3\" width=\"100%\"  align=\"center\" border=\"15\" \>  <TBODY\>  <TR\>  <TD\>  <TABLE title=\"平哥编辑-QQ:9027798\" style=\"BORDER-LEFT-COLOR: #832828; BORDER-BOTTOM-COLOR: #832828; BORDER-TOP-STYLE: ridge; BORDER-TOP-COLOR: #832828; BORDER-RIGHT-STYLE: ridge; BORDER-LEFT-STYLE: ridge; BORDER-COLLAPSE: collapse; BORDER-RIGHT-COLOR: #832828; BORDER-BOTTOM-STYLE: ridge;\"  cellSpacing=\"3\" cellPadding=\"3\" width=\"100%\"  align=\"center\" bgColor=\"#000000\" border=\"10\" \>  <TBODY\>  <TR\>  <TD\>  </TD\></TR\></TABLE\></TD\></TR\></TABLE\>',
              blogTag:'',
              blogUrl:'blog/static/9247002320091111329285',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1332600768839,
              publishTime:1233500609285,
              permalink:'blog/static/9247002320091111329285',
              commentCount:0,
              mainCommentCount:0,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/9247002320091111329285">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

章鱼博客

导航

日志

文字的特效

历史上的今天

最近读者

热度

评论

页脚