| 阿七 |
2006-04-05 09:03 |
效果： I2W2B3D` c
=TP>Y"
3D Text 4z*_,@OA
以下是一个用了blur滤镜而另一个没用的叠加效果 ^LNc
Dw #&x/G
Ttop.cn Ttop.cn b? Jm)
(mD]}{>
Glass Text *C:+N>
这个是两个都用了alpha滤镜的效果 uLCU3nI
7
%|>7
Ttop.cnTtop.cn !<LS4s;
J6%op{7/
Inner Shadow Orb(xLChJ
这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: -200px位置上形成的。 7wqwDE
vXvV5Oq
Ttop.cnTtop.cn 6wd]X-G++
&7 W6I M
Outline Text AFFLnLA<L
用mask, glow and chroma三个滤镜联合作用 *nc4X9
8$vH&Hd I
Ttop.cn H<xC%/8
u l%bo%&~
与Marquee的完美结合 #TWc` 8
www.Ttop.cnwww.Ttop.cn &wuV}S 7
"qsNySI
源代码： 9y4rw]4zI
v wyDY%B"n
<style type="text/css"> +)@> 60y
<!-- ]x G8vy
.sample
xAjQ W=
font-style: italic; font-family: arial black;font-size: 40px; font-weight: bold; cursor: hand; 8Vn6* Xn
*Vl
=PNn-
--> z~ H Gc"~
</style>
c6HU'%v
<title>Css不朽的经典—3D文字特效</title> UW*
aSZ/?
<div> h9I )<_}R
<h2>3D Text</h2> nIjQLx
<p>以下是一个用了blur滤镜而另一个没用的叠加效果</p> FZ9< Q
<p onClick="alert(this.innerHTML)"> <span class="sample" g# 4gGhI
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" ~Z]vr6?$h
>Ttop.cn</span><span class="sample" {h"\JI!
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;"> Nd_@J&
Ttop.cn</span> </p> m GhJn
<h2>Glass Text</h2> Jg:-TK/
<p>这个是两个都用了alpha滤镜的效果</p> \.c
) ^QQ
<p onClick="alert(this.innerHTML)"> <span class="sample" E aD@clJS
style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);" EKP TDKut
>Ttop.cn</span><span class="sample" rcZ SC 3
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);" X~he36-+<
>Ttop.cn</span> </p> Pm^N0L9?q
<h2>Inner Shadow</h2> ~5NG DT#L*
<p>这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: oKi1=d+T
-200px位置上形成的。</p> } +4Bf+u:
<p onClick="alert(this.innerHTML)"> <span class="sample" {z /^X<T
style="width: 200px; height: 70; color: white;" B)]{]z0+`
>Ttop.cn</span><span class="sample" 9S%gVNxn
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);" {p|%hhTK%
>Ttop.cn</span> </p> pPqN[ OJ
<h2>Outline Text</h2> Kk>qgi$
<p>用mask, glow and chroma三个滤镜联合作用</p> _IV@^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> {7Avba
<h2>与Marquee的完美结合</h2> =>0 M3 Qh{
<p onClick="alert(this.innerHTML)"> <span class="sample" 2 dD<]
style="width:320px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" ZQ9oZHU m
><marquee width:300 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> C 9U {
^
<span class="sample" W)!{U(X
style="position: relative; left: -320; top: -15; width: 320; color: #2984ff;"> $xtE+EV.p
<marquee width:320 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> </p> ; eF
4J
</div> |
|