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

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

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

阿七

2006-04-05 09:03

效果： 1Z|q0-Dw0
8KN0z<
3D Text WUZusW 5s
以下是一个用了blur滤镜而另一个没用的叠加效果 J&2cf#
y@e/G3
Ttop.cn Ttop.cn "cj6i{x,~w
PIl:z?q({
Glass Text ;X*I,g.+H
这个是两个都用了alpha滤镜的效果 s: pmB\
e+Vn@-L;
Ttop.cnTtop.cn 8k vG<&D
rUmaKh?v|X
Inner Shadow !W^P|:Qt
这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: -200px位置上形成的。 #-W a3P
?$J#jhR?
Ttop.cnTtop.cn Wa.y7S0(@
b*Sw")#
Outline Text %m)vQ\Vtx
用mask, glow and chroma三个滤镜联合作用 UXgeL2`;
~T">)Y~+xI
Ttop.cn B:oE&Ahh{
{0?^$R8j
与Marquee的完美结合 !A":L0[7n
www.Ttop.cnwww.Ttop.cn Zmx[:-
46[k9T
源代码： 'nJ,m Zx
wDp5HZ>
<style type="text/css"> ^J~5k,7jX
 Kt3T~k
</style> '+&!;Jj,
<title>Css不朽的经典—3D文字特效</title> #KUNZW
<div> aOhi<I`*
<h2>3D Text</h2> Uc<BLu;
<p>以下是一个用了blur滤镜而另一个没用的叠加效果</p> `|p8zV
<p onClick="alert(this.innerHTML)"> <span class="sample" c8h71Cr
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" EG!Nsb^,
>Ttop.cn</span><span class="sample" OE/r0C<&
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;"> \=c@
Ttop.cn</span> </p> ?>Bt|[p:s)
<h2>Glass Text</h2> 0ky3rFSh1
<p>这个是两个都用了alpha滤镜的效果</p> uWLf9D"
<p onClick="alert(this.innerHTML)"> <span class="sample" ^tL]QE?|
style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);" 9Xe|*bT
>Ttop.cn</span><span class="sample" byHXRA )39
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);" 8Xa{.y"
>Ttop.cn</span> </p> ({<qs}H"
<h2>Inner Shadow</h2> ^S:I38gR#q
<p>这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: v*&WqVg
-200px位置上形成的。</p> "y-/ 9C
<p onClick="alert(this.innerHTML)"> <span class="sample" b6^#{))"
style="width: 200px; height: 70; color: white;" 72\o6{BiC
>Ttop.cn</span><span class="sample" _]M:
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);" m }\L i]
>Ttop.cn</span> </p> OSkBBo]~z
<h2>Outline Text</h2> 6oLZH 6fG
<p>用mask, glow and chroma三个滤镜联合作用</p> i}kMo@
<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> U=N]XwjVK<
<h2>与Marquee的完美结合</h2> $+n5l@W
<p onClick="alert(this.innerHTML)"> <span class="sample" "uU[I,h
style="width:320px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" 2(>=@q.1H
><marquee width:300 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> 98!H$6k
<span class="sample" +\66; 7]s
style="position: relative; left: -320; top: -15; width: 320; color: #2984ff;"> HE*P0Yf=
<marquee width:320 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> </p> C-;}a%c"
</div>