Css不朽的经典—3D文字特效网站建设常州五颜六色网络技术有限公司

常州五颜六色网络技术有限公司 -> 网站建设 -> Css不朽的经典—3D文字特效

登录 -> 注册 -> 回复主题 -> 发表主题

阿七

2006-04-05 09:03

效果： ;_I>`h"r
wuH*a3(
3D Text }QCnN2bV
以下是一个用了blur滤镜而另一个没用的叠加效果 <R]m(
ed,A'S=d
Ttop.cn Ttop.cn vTK%4=|1}!
U3{<+vSR `
Glass Text v0\l~_|H
这个是两个都用了alpha滤镜的效果 ]eKuR"ob0
~.W]x~X$
Ttop.cnTtop.cn SUc%dpXZa
W~ ~'
Inner Shadow KV_/fa~Ry
这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: -200px位置上形成的。 =xo0T 6
|fgUW .
Ttop.cnTtop.cn \jiE:Qt
OT 0c5x
Outline Text Me.I>7c
用mask, glow and chroma三个滤镜联合作用 ..}P$
7[1Lh'u
Ttop.cn wb$uq/|
u"HGT=Nl
与Marquee的完美结合 .$&^yp
www.Ttop.cnwww.Ttop.cn j}^w:W76
;ek*2Lh
源代码： +HS]kFH
J~2SGXH)^?
<style type="text/css"> f7x2"&?vg
 v6*0@/L M
</style> -uYxc=4Lh
<title>Css不朽的经典—3D文字特效</title> sM-,95H
<div> l!tR<$|
<h2>3D Text</h2> N9w"Lb
<p>以下是一个用了blur滤镜而另一个没用的叠加效果</p> +u$l]~St\
<p onClick="alert(this.innerHTML)"> <span class="sample" ok\-IU?
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" <A,V/']
>Ttop.cn</span><span class="sample" yD3}USw
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;"> y \skke]
Ttop.cn</span> </p> gQeQy
<h2>Glass Text</h2> L2XhrLK.|
<p>这个是两个都用了alpha滤镜的效果</p> j*.;6}\o
<p onClick="alert(this.innerHTML)"> <span class="sample" Jy(G A
style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);" ;u<Ah?w=Z
>Ttop.cn</span><span class="sample" *JJ8\R&P0
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);" ?%6oM
>Ttop.cn</span> </p> =%W:N|k
<h2>Inner Shadow</h2> 0ID9=:J
<p>这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: 4}H+hk8-
-200px位置上形成的。</p> GLf!i1Z
<p onClick="alert(this.innerHTML)"> <span class="sample" \Bo$ 3
style="width: 200px; height: 70; color: white;" V9) /
>Ttop.cn</span><span class="sample" `]KX`xGK
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);" 7P<VtS
>Ttop.cn</span> </p> l'"nU6B&
<h2>Outline Text</h2> gzs\C{4D
<p>用mask, glow and chroma三个滤镜联合作用</p> G&*P*f1S
<p onClick="alert(this.innerHTML)"> <span class="sample" style="width: 200px; height: 70; filter: mask(color=red) glow(color=black, strength=1) chroma(color=red);">Ttop.cn</span> </p> nm5DNpHk
<h2>与Marquee的完美结合</h2> pCE GZV,d@
<p onClick="alert(this.innerHTML)"> <span class="sample" O) q4^AE$
style="width:320px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" KL_/f
><marquee width:300 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> 4A2}3$c9
<span class="sample" GQbr}xX.#
style="position: relative; left: -320; top: -15; width: 320; color: #2984ff;"> ga +, P
<marquee width:320 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> </p> =Kkqk
</div>