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

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

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

阿七

2006-04-05 09:03

效果： seU^IC<
VD&3%G!
3D Text ~G:2iSi(#
以下是一个用了blur滤镜而另一个没用的叠加效果 *[~o~e/YCb
pW--^aHu
Ttop.cn Ttop.cn AD%D ,l
\j})Kul
Glass Text FO>(QLlH
这个是两个都用了alpha滤镜的效果 UK_aqB
5h=TV
Ttop.cnTtop.cn 3?Eoj95w!
$#ju?B~
Inner Shadow chMc(.cN0
这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: -200px位置上形成的。 }Wche/g`
)!}-\5F
Ttop.cnTtop.cn <RPoQ'.^
@?7{%j*
Outline Text b801OF
用mask, glow and chroma三个滤镜联合作用 2 ssj(Qo
Ag4Ga?&8ec
Ttop.cn 1.95 ^8
hKZ`D B4
与Marquee的完美结合 6;[/9
www.Ttop.cnwww.Ttop.cn [&pW&>p3
oS#'u1k
源代码： H&=n:'k^
:EmQ_?(^
<style type="text/css"> W\qLZuQ
 WfDX"rA
</style> C3\E.u?
<title>Css不朽的经典—3D文字特效</title> _))I.c=v
<div> jkF+g$B
<h2>3D Text</h2> Z<ajET`)
<p>以下是一个用了blur滤镜而另一个没用的叠加效果</p> 'cAc{\)
<p onClick="alert(this.innerHTML)"> <span class="sample" J}(6>iuQY?
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" ```d:f
>Ttop.cn</span><span class="sample" ,]Ro',A&
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;"> wMz-U- z
Ttop.cn</span> </p> iIsE Qh
<h2>Glass Text</h2> ZMoJ#p(
<p>这个是两个都用了alpha滤镜的效果</p> 8VP"ydg-U
<p onClick="alert(this.innerHTML)"> <span class="sample" 2f|6z-Z
style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);" 3a#PA4Ql
>Ttop.cn</span><span class="sample" izPh1YA
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);" pd4cg?K
>Ttop.cn</span> </p> _\dt?(m|
<h2>Inner Shadow</h2> ieo|%N{'
<p>这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: 3ar=1_Ar
-200px位置上形成的。</p> J]}FC{CD!
<p onClick="alert(this.innerHTML)"> <span class="sample" E &7@#'l
style="width: 200px; height: 70; color: white;" Q !9HA[Ly
>Ttop.cn</span><span class="sample" M[aT2A
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);" @iU%`=ziz
>Ttop.cn</span> </p> 1$$37?F E
<h2>Outline Text</h2> 5- D`<\
<p>用mask, glow and chroma三个滤镜联合作用</p> A7k'K4
<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> d5DP^u
<h2>与Marquee的完美结合</h2> gbm0H-A:*
<p onClick="alert(this.innerHTML)"> <span class="sample" ajn-KG!A
style="width:320px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" h|bqyu
><marquee width:300 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> 1~%o}+#-
<span class="sample" k$C"xg2
style="position: relative; left: -320; top: -15; width: 320; color: #2984ff;"> K7IyCcdB
<marquee width:320 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> </p> K~c^*;F
</div>