阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
Css不朽的经典—3D文字特效
效果： F^rl$#pCS
RVP18ub.S
3D Text J
px'W
以下是一个用了blur滤镜而另一个没用的叠加效果 C*G/_`?9
fuyl/bx}
Ttop.cn Ttop.cn e\.HWV]I
Gl>E[iO
Glass Text /"MJkM.~E
这个是两个都用了alpha滤镜的效果 ~4^p}{
]fC7%"nB
Ttop.cnTtop.cn owM mC R
UTX](:TC
Inner Shadow @dV9Dpu
这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: -200px位置上形成的。 ;eh/_hPM
CJA+v-
Ttop.cnTtop.cn F[`vH
ee<H@LeG
Outline Text dXO=ZU/N
用mask, glow and chroma三个滤镜联合作用 n?Zf/ T
M5u_2;3
Ttop.cn ?cxr%` E
Y^3)!>
与Marquee的完美结合 X <FOn7qf
www.Ttop.cnwww.Ttop.cn %/%gMRXG2
w"6aha*%7
源代码： yM|g|;U
s7M}NA 0
<style type="text/css"> >KHp-|0pv
<!-- P57GqT
.sample -p^'XL*Z
font-style: italic; font-family: arial black;font-size: 40px; font-weight: bold; cursor: hand; _XWnS9
e?1KbJ?.
--> 0@v 2*\D#
</style> lG 8dI\`
<title>Css不朽的经典—3D文字特效</title> vG 3M5G
<div> uAT/6@
<h2>3D Text</h2> ,P~QS
<p>以下是一个用了blur滤镜而另一个没用的叠加效果</p> Pv[ykrm/
<p onClick="alert(this.innerHTML)"> <span class="sample" L?Tu)<Mn
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" ?cJA ^W
>Ttop.cn</span><span class="sample" ( QK sB3X
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;"> }v&K~ !*
Ttop.cn</span> </p> ,0,Oe=d
<h2>Glass Text</h2> jf8w7T
<p>这个是两个都用了alpha滤镜的效果</p> GqMB^Ad
<p onClick="alert(this.innerHTML)"> <span class="sample" FXxN>\76.
style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);" PMY~^S4O
>Ttop.cn</span><span class="sample" X]MTa D.t
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);" ]6q*)q:`
>Ttop.cn</span> </p> 1[px`%DR~
<h2>Inner Shadow</h2> S NN #$8\
<p>这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left:
<a fO 6?`
-200px位置上形成的。</p> K,]woNxaw
<p onClick="alert(this.innerHTML)"> <span class="sample" .}`V I`z*
style="width: 200px; height: 70; color: white;" VH[ l\I(h
>Ttop.cn</span><span class="sample" "5 y<G:$+~
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);" C&e8a9*,(a
>Ttop.cn</span> </p> :Nkz,R?
<h2>Outline Text</h2> 8a?IC|~Pz
<p>用mask, glow and chroma三个滤镜联合作用</p> fmBkB8
<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> y=wdR|b
<h2>与Marquee的完美结合</h2> k5 q(7&C
<p onClick="alert(this.innerHTML)"> <span class="sample" X& /(x
style="width:320px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" :)j7 U3u
><marquee width:300 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> x~% \y
<span class="sample" v, 8Si'"i+
style="position: relative; left: -320; top: -15; width: 320; color: #2984ff;"> J#+Op/mmo
<marquee width:320 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> </p> raSF3b/0
</div>
|
|
|
|
[楼 主]
|
Posted: 2006-04-05 09:03 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> Css不朽的经典—3D文字特效
