阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
Css不朽的经典—3D文字特效
效果： NY 4C@@"
~%KM3Vap
3D Text () <`t}FQ
以下是一个用了blur滤镜而另一个没用的叠加效果 2mLUdx~c
O T%V{hD
Ttop.cn Ttop.cn vh{9'vd3el
(qj,GmcS
Glass Text
l-M xLcz
这个是两个都用了alpha滤镜的效果 ha fECs
2J&XNV^tJ
Ttop.cnTtop.cn ,y%ziay
[tOuNj:
Inner Shadow 'hy?jQ'|e
这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: -200px位置上形成的。 E0T&GR@.
,FY-d$ 3)
Ttop.cnTtop.cn 99a \MH`^
*3P3M}3~\
Outline Text @kz!{g]Sn
用mask, glow and chroma三个滤镜联合作用 d4% `e&K]'
P6:;Y5e0
Ttop.cn % mJ~F*Dy
au, jA k
与Marquee的完美结合 k)|'JD m
www.Ttop.cnwww.Ttop.cn T0YDfo
64h_1, U
源代码： -.^ 3;-[
Ny.*G@&
<style type="text/css"> LSSW.Oz2L
<!-- :Jjw"}SfK#
.sample AvyQ4xim+
font-style: italic; font-family: arial black;font-size: 40px; font-weight: bold; cursor: hand; (*MNox?w
8W;xi:CC
--> E(%
XVr0W
</style> H_Iim[v#
<title>Css不朽的经典—3D文字特效</title> \Bt =bu>Z
<div> ~:T3|
<h2>3D Text</h2> c6t2Q6zV
<p>以下是一个用了blur滤镜而另一个没用的叠加效果</p> sTt9'P`
<p onClick="alert(this.innerHTML)"> <span class="sample" jYrym -
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" stX'yya
>Ttop.cn</span><span class="sample" C%0<1 m p
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;"> 2H [=l Y
Ttop.cn</span> </p>
"Ys _ \
<h2>Glass Text</h2> Vu_&~z7h
<p>这个是两个都用了alpha滤镜的效果</p> 4pLQ"&>}80
<p onClick="alert(this.innerHTML)"> <span class="sample"
mPck f
style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);" ;0;3BH A
>Ttop.cn</span><span class="sample" ~ l(G6/R
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);" mr@_ %U
>Ttop.cn</span> </p> I0I_vu
<h2>Inner Shadow</h2> sP9^ IP
<p>这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: :-$cd
Z3E
-200px位置上形成的。</p> ]#v WKNv:;
<p onClick="alert(this.innerHTML)"> <span class="sample" b;Hm\aK
style="width: 200px; height: 70; color: white;" >BJ2v=R A
>Ttop.cn</span><span class="sample" ^Yf3"D?&
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);" uG2Xkj
>Ttop.cn</span> </p> BXT 80a\
<h2>Outline Text</h2> Z ~duJsH
<p>用mask, glow and chroma三个滤镜联合作用</p> P=f<#l"v
<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> D_O5k|-V
<h2>与Marquee的完美结合</h2> WA <H
<p onClick="alert(this.innerHTML)"> <span class="sample" )W[KD,0+j
style="width:320px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" g@$0FY{Q
><marquee width:300 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> FI3sLA
<span class="sample" lf?Z{^
style="position: relative; left: -320; top: -15; width: 320; color: #2984ff;"> [
P.@1mV
<marquee width:320 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> </p> _ pY
</div>
|
|
|
|
[楼 主]
|
Posted: 2006-04-05 09:03 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> Css不朽的经典—3D文字特效
