阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
Css不朽的经典—3D文字特效
效果： cc J!N
wE J?Y8
3D Text 3qB ZzM
O*
以下是一个用了blur滤镜而另一个没用的叠加效果 ee{8C~
Pdw[#X<[`
Ttop.cn Ttop.cn PV/S zfvIq
o;2QZ"v
Glass Text \hFIg3
这个是两个都用了alpha滤镜的效果 cQldBc
Rj z~n38.
Ttop.cnTtop.cn -A17tC20J1
H}B%OFI \+
Inner Shadow q/HwcX+[b
这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: -200px位置上形成的。 iLD:}yK
&
!I$
Ttop.cnTtop.cn uGMmS9v$ J
6_h'0~3?`
Outline Text N M_Xy<.~E
用mask, glow and chroma三个滤镜联合作用 {@w!kl ~8
_ }(ej&'f
Ttop.cn XUp'wP
1y($h<
与Marquee的完美结合 N9A#@c0O
www.Ttop.cnwww.Ttop.cn t\ %gP@?
"`4V ^1
源代码： \ tx4bV#
).b ,KSi
<style type="text/css"> @?r[
$Ea1M
<!-- <| MF
\D'
.sample n^2p jTkl
font-style: italic; font-family: arial black;font-size: 40px; font-weight: bold; cursor: hand; BQfq]ti
+__PT4ps
--> [| ! A3o
</style> IDIok~B=e
<title>Css不朽的经典—3D文字特效</title> J@vL,C)E6
<div> O.% $oV
<h2>3D Text</h2> J>XMaI})U
<p>以下是一个用了blur滤镜而另一个没用的叠加效果</p> H ]x-s
<p onClick="alert(this.innerHTML)"> <span class="sample" )Z0bM O<
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" C6T?D 5
>Ttop.cn</span><span class="sample" :7 P/ZC%
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;"> t/57LjV
Ttop.cn</span> </p> 9 cwy;a u
<h2>Glass Text</h2> f6r~Ycf,f
<p>这个是两个都用了alpha滤镜的效果</p> t)
:'X Gk@
<p onClick="alert(this.innerHTML)"> <span class="sample" 5SNa~
kC&
style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);" %qYiE!%
&
>Ttop.cn</span><span class="sample" ;n~-z5)
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);" p?v. 42R:z
>Ttop.cn</span> </p> y k{8O.g
<h2>Inner Shadow</h2> H-|%\9&{S
<p>这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: n,_q 6/!
-200px位置上形成的。</p> NrK.DY 4
<p onClick="alert(this.innerHTML)"> <span class="sample" ls* bCe
style="width: 200px; height: 70; color: white;" _* m<Z;Et
>Ttop.cn</span><span class="sample" =+z +`ot
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);" aVvma=
>Ttop.cn</span> </p> {gkzo3
<h2>Outline Text</h2> Oe~x,=X)
<p>用mask, glow and chroma三个滤镜联合作用</p> r V_i|
<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> L
GdM40
<h2>与Marquee的完美结合</h2> 2Pm[
kD4E=
<p onClick="alert(this.innerHTML)"> <span class="sample" QB.QG!@
style="width:320px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" >_J9D?3S
><marquee width:300 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> |W#(+m
<span class="sample" yt
@7l]I
style="position: relative; left: -320; top: -15; width: 320; color: #2984ff;"> vk0b b3){D
<marquee width:320 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> </p> >'1 [Bh
</div>
|
|
|
|
[楼 主]
|
Posted: 2006-04-05 09:03 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> Css不朽的经典—3D文字特效
