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

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

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

阿七

2006-04-05 09:03

效果： i%GjtYjS
&n|#jo(gS
3D Text /tikLJ
以下是一个用了blur滤镜而另一个没用的叠加效果 yK+76\} I
t48(,
Ttop.cn Ttop.cn !u.{<51b
$NJ]2P9L
Glass Text .7ESPr
这个是两个都用了alpha滤镜的效果 N#Bg`:!
R|% 3JE0
Ttop.cnTtop.cn f&bY=$iff
s[ )2z3
Inner Shadow 8RbtI 4
这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: -200px位置上形成的。 5m&{f>]T
o^wj_#ai$
Ttop.cnTtop.cn |j&u2DM~#m
`9B xDp]I
Outline Text -N(y+~wN
用mask, glow and chroma三个滤镜联合作用 '\H{Y[
Z%\9y]zs
Ttop.cn d}3<nz,
L;I.6<K.
与Marquee的完美结合 )fP,F(
www.Ttop.cnwww.Ttop.cn 3!`Pv ? |o
Z7"8dlb
源代码： @g(N!n~
64z9Yr@
<style type="text/css"> M.zS +
 aj51%wKMb:
</style> <.CO{L\e
<title>Css不朽的经典—3D文字特效</title> N{46DS
<div> e]!Vxn3
<h2>3D Text</h2> kXzm
<p>以下是一个用了blur滤镜而另一个没用的叠加效果</p> B]ul~FX
<p onClick="alert(this.innerHTML)"> <span class="sample" J:dF^3Y
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" D{Y~kV|
>Ttop.cn</span><span class="sample" A@bWlwfl
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;"> ?{?mAbc
Ttop.cn</span> </p> lAJ)
<h2>Glass Text</h2> F7^8Ej9*a
<p>这个是两个都用了alpha滤镜的效果</p> [6K2V:6:
<p onClick="alert(this.innerHTML)"> <span class="sample" \NhCu$'
style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);" pRx^O F(3
>Ttop.cn</span><span class="sample" au9r)]p-
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);" +L;[-]E8
>Ttop.cn</span> </p> ^c83_93)R
<h2>Inner Shadow</h2> tPPnW
<p>这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: t>7t4>X
-200px位置上形成的。</p> %1gJOV
<p onClick="alert(this.innerHTML)"> <span class="sample" R"6Gm67t
style="width: 200px; height: 70; color: white;" #i-!:6sLA
>Ttop.cn</span><span class="sample" `]\4yTd
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);" <89@k(\ /
>Ttop.cn</span> </p> $5G vF1
<h2>Outline Text</h2> 1B'i7
<p>用mask, glow and chroma三个滤镜联合作用</p> P{)H7B>
<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> bv9\Jp0c
<h2>与Marquee的完美结合</h2> daaUC
<p onClick="alert(this.innerHTML)"> <span class="sample" AJ2Xq*fk
style="width:320px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" &~pj)\_
><marquee width:300 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> g,Kb9['
<span class="sample" ($E(^p% O
style="position: relative; left: -320; top: -15; width: 320; color: #2984ff;"> "sz LTC]*6
<marquee width:320 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> </p> #I%< 1c%XA
</div>