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

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

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

阿七

2006-04-05 09:03

效果： d#xi_L!
d|#sgGM<8
3D Text d+[GMIxg
以下是一个用了blur滤镜而另一个没用的叠加效果 OZ##x
[hC-} 9
Ttop.cn Ttop.cn 8 :B(}Y4K
'qel3Fs"
Glass Text :Rl*64}
这个是两个都用了alpha滤镜的效果 ;|7]%Z}%
vdA3
Ttop.cnTtop.cn s\&qvL1D
sg0HYb%_E
Inner Shadow x[L/d"Wf
这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: -200px位置上形成的。 Zw6UH;5
#$k6OlK-r"
Ttop.cnTtop.cn vk;]9o j*
/A$mP)}tz
Outline Text >Z%qkU/
用mask, glow and chroma三个滤镜联合作用 -aj) _.d
Qn0 1ig
Ttop.cn oMdqg4HUF
HYqDaRn
与Marquee的完美结合 y*K]z
www.Ttop.cnwww.Ttop.cn ;(0<5LQ
XQW9/AzNf
源代码： nG Bjxhl
iH&BhbRu_
<style type="text/css"> bSbUf%LKt
 \9FWH}|
</style> @-d0~.S
<title>Css不朽的经典—3D文字特效</title> Y#[Wv1hi
<div> FEoH $.4
<h2>3D Text</h2> U`25bb1Wj
<p>以下是一个用了blur滤镜而另一个没用的叠加效果</p> T][r'jWQ
<p onClick="alert(this.innerHTML)"> <span class="sample" '5V#sq;Z
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" dF (m!P/R
>Ttop.cn</span><span class="sample" )'pc1I
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;"> }iu(-{Z
Ttop.cn</span> </p> "~-Y'O
<h2>Glass Text</h2> =5zx]N1r
<p>这个是两个都用了alpha滤镜的效果</p> u=mJI*
<p onClick="alert(this.innerHTML)"> <span class="sample" +0)zB;~7
style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);" CHZjK(a
>Ttop.cn</span><span class="sample" ;?-`n4B&
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);" h3z=tu['
>Ttop.cn</span> </p> >WKlR` J%
<h2>Inner Shadow</h2> JsA9Xdk`
<p>这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: {1jywb }
-200px位置上形成的。</p> P0/B!8x
<p onClick="alert(this.innerHTML)"> <span class="sample" uI'g] 18Hi
style="width: 200px; height: 70; color: white;" nV$ctdusQ
>Ttop.cn</span><span class="sample" ~582'-=+
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);" C6"bGA
>Ttop.cn</span> </p> Aj2 2t
<h2>Outline Text</h2> JN{xh0*
<p>用mask, glow and chroma三个滤镜联合作用</p> qtv>`:neB
<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> =XT'D@q~W
<h2>与Marquee的完美结合</h2> c/c%-=
<p onClick="alert(this.innerHTML)"> <span class="sample" gUrb&#\X
style="width:320px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" V r0-/T
><marquee width:300 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> !`VO#_TJ
<span class="sample" fGv`.T_d
style="position: relative; left: -320; top: -15; width: 320; color: #2984ff;"> HxVQeyOR
<marquee width:320 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> </p> 7 -(LWH
</div>