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

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

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

阿七

2006-04-05 09:03

效果： 5QL9w3L
}<\65 B$1
3D Text :d% -,v
以下是一个用了blur滤镜而另一个没用的叠加效果 j0pvLZjM
,8J*S
Ttop.cn Ttop.cn !aW*dD61
,$6MM6W;-F
Glass Text hyvV%z Z
这个是两个都用了alpha滤镜的效果 /_k hFw
kXZV%mnT7
Ttop.cnTtop.cn ZTBFV/{
S!I <m&Cgc
Inner Shadow TJw.e/
这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: -200px位置上形成的。 uDE91.pUkr
@'<j!CqQ o
Ttop.cnTtop.cn SG|i/K|7
R 6yvpH
Outline Text MY<!\4/
用mask, glow and chroma三个滤镜联合作用 S~a:1 _Wl
X_sG6Q@
Ttop.cn t!=~5YgKs
kG;\ i
与Marquee的完美结合 v/TlXxfil
www.Ttop.cnwww.Ttop.cn }rMpp[
Znl>*e/|
源代码： #L 4Kwy
norc!?L
<style type="text/css"> N1 3;hB<
 d7K17KiC
</style> ;pNbKf:
<title>Css不朽的经典—3D文字特效</title> l[\, *C
<div> ,Qi|g'a
<h2>3D Text</h2> eGypXf%
<p>以下是一个用了blur滤镜而另一个没用的叠加效果</p> dR, NC-*
<p onClick="alert(this.innerHTML)"> <span class="sample" /2\=sTd
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" ttq< )4
>Ttop.cn</span><span class="sample" ~CdseSo9
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;"> k-DB~-L
Ttop.cn</span> </p> [[r3fEr$!p
<h2>Glass Text</h2> [qD<U%Hi
<p>这个是两个都用了alpha滤镜的效果</p> H- qP>:
<p onClick="alert(this.innerHTML)"> <span class="sample" H[!Q
style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);" aU8Ti8A>
>Ttop.cn</span><span class="sample" NG W{Z~l
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);" b%jG?HSu
>Ttop.cn</span> </p> M^Ay,jK!
<h2>Inner Shadow</h2> Sfa m=.l
<p>这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: y~ 4nF
-200px位置上形成的。</p> d8 Nh0!
<p onClick="alert(this.innerHTML)"> <span class="sample" 5b4V/d* '
style="width: 200px; height: 70; color: white;" QDT{Xg*I
>Ttop.cn</span><span class="sample" Ihq@|s8
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);" .,K?\WZ
>Ttop.cn</span> </p> |afK"N
<h2>Outline Text</h2> 'xXqEwi4
<p>用mask, glow and chroma三个滤镜联合作用</p> QOy&!6
<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> qg:I+"u
<h2>与Marquee的完美结合</h2> Y^m=_*1g5
<p onClick="alert(this.innerHTML)"> <span class="sample" yy.:0:ema
style="width:320px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" *k]S{ ]Y
><marquee width:300 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> B5r_+?=2e
<span class="sample" :ItW|
style="position: relative; left: -320; top: -15; width: 320; color: #2984ff;"> H;Qn?^
<marquee width:320 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> </p> jh](s U
</div>