DHTML CSS 文字特效

作者:金海龙

 
 
文字特效
透空立体 描边
动态模糊 动态发光
旋转阴影 旋转
立体旋转 舞动起来
神奇 光晕
感谢天主 啊来路亚
在style属性中设置边距离,可以防止边缘遮挡:padding-top:5px
<script type="text/javascript"> </script>

如果上面的效果不好,请把下面的代码复制并制作一个HTML文件,你就能看到效果:

<STYLE>
<!--
.a{
color:black;
WIDTH: 200px;
height:30px;
FONT-FAMILY: 仿宋,新宋体;
FONT-SIZE: 33px;
FILTER:Glow(Color=blue,Strength=1) chroma(color=black);
text-decoration:none;
}
.b{
color:yellow;
WIDTH: 200px;
height:30px;
FONT-FAMILY: 仿宋,新宋体;
FONT-SIZE: 33px;
FILTER:Glow(Color=blue,Strength=1);
text-decoration:none;
padding-top:5px;
}
#c{
color:red;
WIDTH: 200px;
height:50px;
FONT-FAMILY: 仿宋,新宋体;
FONT-SIZE: 33px;
text-decoration:none;
}
#h{
color:blue;
WIDTH: 200px;
height:50px;
FONT-FAMILY: 仿宋,新宋体;
FONT-SIZE: 33px;
FILTER:Glow(Color=gold,Strength=3);
}
tr
{
align:center;
}
-->
</style>
<BODY><PRE>
<A HREF=http://bigengineer.blog.163.com>作者:金海龙</A>
<table border=1 align=center bgcolor=white>
<tr align=center><td colspan=2 style="font-size:35px;font-weight:bold;font-name:黑体,宋体;background-color:#FfECFF;">
文字特效
</td></tr>
<tr><td>
<A class=a>透空立体</A>
</td><td>
<A class=b title="黄字蓝边">描边</A>
</td></tr>
<tr><td>
<A id=c>动态模糊</A>
</td><td>
<A id=d class=b>动态发光</A>
</td></tr>
<tr><td>
<A id=e class=a>旋转阴影</A>
</td><td>
<A id=f>旋转</A>
</td></tr>
<tr><td>
<A id=g>立体旋转</A>
</td><td>
<A id=h>舞动起来</A>
</td></tr>
<tr><td>
<A id=j>神奇</A>
</td><td>
<A id=k>光晕</A>
</td></tr>
<tr><td>
<span style="text-align:center;line-height:35px;letter-spacing:15px;font-size:28px;color:red;WIDTH: 50px;FONT-FAMILY:仿宋,新宋体;FILTER:Shadow(Color=gold,direction=500) wave(freq=2,lightstrength=10,strength=2) Blur(Direction=125,Strength=15,add=1);padding:15px">
感谢天主</span>
</td><td>
<span style="font-weight:100;text-align:center;line-height:35px;letter-spacing:15px;font-size:28px;color:white;WIDTH: 50px;FONT-FAMILY:仿宋,新宋体;FILTER:Shadow(Color=gold,direction=500) wave(freq=2,lightstrength=10,strength=2) Blur(Direction=125,Strength=15,add=1);padding:15px">
啊来路亚</span>
</td></tr>

<tr><td colspan=2 style="font-size:12px">
在style属性中设置边距离,可以防止边缘遮挡:padding-top:5px
</td></tr>
</table>
<script language=vbs>
<!--
dim t,di,ii,ji
di=0
ji=0
t=window.setinterval("tt",100)

sub tt
if di>360 then
di=0
else di=di+10
end if
c.style.filter="Shadow(Color=blue,direction="+cstr(di)+")"

d.style.filter="Blur(Direction="+cstr(di)+",Strength=5,add=0) Glow(Color=blue,strength=3)"

e.style.filter="Blur(Direction="+cstr(di)+",Strength=5,add=0)"

with f.style
.color="red"
.WIDTH="200px"
.height="50px"
.FONTFAMILY="仿宋,新宋体"
.FONTSIZE="43px"
.filter="Blur(Direction="+cstr(360-di)+",Strength=5,add=0) Glow(Color=blue,strength=3) xray"
end with

with g.style
.color="white"
.WIDTH="200px"
.height="50px"
.FONTFAMILY="仿宋,新宋体"
.FONTSIZE="40px"
.filter="Shadow(Color=blue,direction="+cstr(di)+")"
end with

with h.style
randomize
ii=rnd*10
ii=int(ii)
ii=cstr(ii)
.filter="wave(freq=2,lightstrength=" & ii &",strength="+ii+")"
end with

with j.style
.color="blue"
.WIDTH="200px"
.height="50px"
.FONTFAMILY="仿宋,新宋体"
.FONTSIZE="40px"
if ji>35 then
ji=1
else
ji=ji+1
end if
.filter="wave(freq=2,strength="+cstr(ji)+")"
end with

with k.style
.color="gold"
.WIDTH="200px"
.height="50px"
.FONTFAMILY="仿宋,新宋体"
.FONTSIZE="40px"
.filter="Glow(Color=gold,strength=" & ii & ")"
end with
end sub
-->
</script>

</PRE></BODY>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值