阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
Css不朽的经典—3D文字特效
效果： 'c 3'eJ0
`O0y8
3D Text QuC_sFP10
以下是一个用了blur滤镜而另一个没用的叠加效果 ,,lR\!>8
E5Sn mxd
Ttop.cn Ttop.cn ?F*I2rt#
+ f:!9)C
Glass Text %OP|%^2
这个是两个都用了alpha滤镜的效果 (B! DBnq
Q 2F20b
Ttop.cnTtop.cn zV(aw~CbZ
E0+~c1
P-
Inner Shadow k(_OhV
_
这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: -200px位置上形成的。 <5}j(jxz}
>P//]n n
Ttop.cnTtop.cn gAf4 w q
'%o^#gJ p
Outline Text 7zIf sb
用mask, glow and chroma三个滤镜联合作用 y9w,Su2
NQqNBI?cr
Ttop.cn Bx6,U4o*
PWkSl
与Marquee的完美结合 *zW]IQ'A
www.Ttop.cnwww.Ttop.cn 6\`8b&'n
?CcX>R-/
源代码： k4E9=y ?
Kf_xKW )^
<style type="text/css"> =K}T; c
<!-- bm4Bq>*=U
.sample T8Q _JQ
font-style: italic; font-family: arial black;font-size: 40px; font-weight: bold; cursor: hand; };<?W){!H
|f
!J-H)
--> # z7yoP
</style> kk4+>mk
<title>Css不朽的经典—3D文字特效</title> nH Rk2l|
<div> {F S)f
<h2>3D Text</h2> [x]~G
<p>以下是一个用了blur滤镜而另一个没用的叠加效果</p> UBk:B
<p onClick="alert(this.innerHTML)"> <span class="sample" OK YbEn#
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" MUGoW;}v )
>Ttop.cn</span><span class="sample" EuImj#Zl
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;"> #f/4%|t:
Ttop.cn</span> </p> sLXM$S MBh
<h2>Glass Text</h2> w{So(AF
<p>这个是两个都用了alpha滤镜的效果</p> NL;sn "
<p onClick="alert(this.innerHTML)"> <span class="sample" #
, eC&X45
style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);" -; FAS3(wy
>Ttop.cn</span><span class="sample" w5
] lU
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);" ]<L~f~vU
>Ttop.cn</span> </p> 7Z<GlNv
<h2>Inner Shadow</h2> U^% )B I
<p>这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: %e3E}m>
-200px位置上形成的。</p> :]CL}n$*
<p onClick="alert(this.innerHTML)"> <span class="sample" X( rXRP#
style="width: 200px; height: 70; color: white;" =&qH%S6
>Ttop.cn</span><span class="sample" E)f9`][
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);" kE8s])Z,+
>Ttop.cn</span> </p> -3azA7tzz
<h2>Outline Text</h2> 23`salLclG
<p>用mask, glow and chroma三个滤镜联合作用</p> AI#.+PrC{/
<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> w/rJj*
<h2>与Marquee的完美结合</h2> }Nwp{["}]L
<p onClick="alert(this.innerHTML)"> <span class="sample" (v|<"
tv
style="width:320px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" |yzv o"3
><marquee width:300 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> A
'b$X1h
<span class="sample" ?Tu =-pp w
style="position: relative; left: -320; top: -15; width: 320; color: #2984ff;"> " zD9R4\X.
<marquee width:320 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> </p> VBF:MAA
</div>
|
|
|
|
[楼 主]
|
Posted: 2006-04-05 09:03 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> Css不朽的经典—3D文字特效
