阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
Css不朽的经典—3D文字特效
效果： .v<c_~y
^R.kThG
3D Text 'EF Sr!+
以下是一个用了blur滤镜而另一个没用的叠加效果 |:_WdU"Q]
a n K7j2
Ttop.cn Ttop.cn C%8nr8 po
jQjtO"\JG
Glass Text CAg\-*P|
这个是两个都用了alpha滤镜的效果 b~?FV>gl
2Qg.b- C
Ttop.cnTtop.cn T_ ifDQX;
k fER
Inner Shadow (=:9pbP
这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: -200px位置上形成的。 49b#$Xq
* B"p:F7J|
Ttop.cnTtop.cn jbx@ ty
<4, hrx&.
Outline Text bqEQP3t^
用mask, glow and chroma三个滤镜联合作用 P_11N9C
u,i~,M
Ttop.cn *,g|I8?%VD
"&;>l<V
与Marquee的完美结合 Hts.G~~
8
www.Ttop.cnwww.Ttop.cn 4QbD DvRQ^
ZuIr=`"j
源代码： w?^qAj(*d
YCvIB'
<style type="text/css"> "~~Js~
<!-- ^2-2Jz@
.sample I}JC ~=`j
font-style: italic; font-family: arial black;font-size: 40px; font-weight: bold; cursor: hand; }Z5f5q
< GoUth.#
--> 3!_X FV
</style> &,B\ig1Jf
<title>Css不朽的经典—3D文字特效</title> P]]re,&R
<div> 3F fS2we
<h2>3D Text</h2> ,CiN@T \&
<p>以下是一个用了blur滤镜而另一个没用的叠加效果</p> _ ; baZ-
<p onClick="alert(this.innerHTML)"> <span class="sample" olc7&R
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" ;T1OXuQ
>Ttop.cn</span><span class="sample" ziUEA>m */
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;"> eXo
7_#
Ttop.cn</span> </p> ykFm$ 0m+I
<h2>Glass Text</h2> R4 2+^'af
<p>这个是两个都用了alpha滤镜的效果</p> m2wGg/F5
<p onClick="alert(this.innerHTML)"> <span class="sample" cXM4+pa=%
style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);" !S6zC >
>Ttop.cn</span><span class="sample" #{-l(016y
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);" J~.8.]gXW
>Ttop.cn</span> </p> fTb&k;'LR<
<h2>Inner Shadow</h2> f(}?Sp_
<p>这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left:
bT(} =j
-200px位置上形成的。</p> u-v/`F2wN
<p onClick="alert(this.innerHTML)"> <span class="sample" SUv(MA&
style="width: 200px; height: 70; color: white;" {O2
4:'K&
>Ttop.cn</span><span class="sample" ?T.'
q
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);" jVA|Vi_2
>Ttop.cn</span> </p> Uwj|To&QR
<h2>Outline Text</h2> D==C"} J
<p>用mask, glow and chroma三个滤镜联合作用</p> GYp}V0
<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> B=vBJC)
<h2>与Marquee的完美结合</h2> UNK}!>HD
<p onClick="alert(this.innerHTML)"> <span class="sample" =;HC7TUM&
style="width:320px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" ~m`j=ot
><marquee width:300 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> CEQs}bz
<span class="sample" `MD%VHQ9U
style="position: relative; left: -320; top: -15; width: 320; color: #2984ff;"> $, I%g<
<marquee width:320 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> </p> 4$ ~A%JN3
</div>
|
|
|
|
[楼 主]
|
Posted: 2006-04-05 09:03 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> Css不朽的经典—3D文字特效
