阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
Css不朽的经典—3D文字特效
效果： c$ib-
Q+Q"J U
3D Text @
hA`f4^
以下是一个用了blur滤镜而另一个没用的叠加效果 N}n3 +F
$[`rY D/.
Ttop.cn Ttop.cn %Jh( 5
R$l-
7YSt
Glass Text 9kWI2cLzQt
这个是两个都用了alpha滤镜的效果 (OE S ~G
S{l)hwlE
Ttop.cnTtop.cn AC
<2.i_
/77cjesZ9
Inner Shadow ly34aD/p~,
这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: -200px位置上形成的。 fh )eL<I
iB
W:t
Ttop.cnTtop.cn lq53
xT
25`W"x_
Outline Text \H>T[
用mask, glow and chroma三个滤镜联合作用 V2?{ebx`
6P >Y2xV:
Ttop.cn "zNS6I?rzE
@BnK C&{
与Marquee的完美结合 .{I LeG
www.Ttop.cnwww.Ttop.cn 'q;MhnU+
vi U}
源代码： {~51h}>b#
p@Os
<style type="text/css"> "Y^Fn, c
<!-- 11QZ - ^
.sample
\
2El>>
font-style: italic; font-family: arial black;font-size: 40px; font-weight: bold; cursor: hand; @+M1M 2@Xz
R6 ej
--> X(d:!-_m *
</style> *$VeR( QN
<title>Css不朽的经典—3D文字特效</title> K($+ILZ
<div> 0hkYexX73
<h2>3D Text</h2> o\W>$$EXD
<p>以下是一个用了blur滤镜而另一个没用的叠加效果</p> ZI$P Qz2i
<p onClick="alert(this.innerHTML)"> <span class="sample" 9b-4BON{P
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" `3[W~Cq
>Ttop.cn</span><span class="sample" 4$2HO `@uN
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;"> ixM#|Yq
Ttop.cn</span> </p> V0,5c`H c
<h2>Glass Text</h2> m>[G-~0?kI
<p>这个是两个都用了alpha滤镜的效果</p> 1 5|gG<-
<p onClick="alert(this.innerHTML)"> <span class="sample" 3\ )bg
R:
style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);" >PdrLwKS
>Ttop.cn</span><span class="sample" 2"
v{
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);" |,.1=| &u
>Ttop.cn</span> </p> h>xB"E|.
<h2>Inner Shadow</h2> S>HfyZ&P c
<p>这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: )99^58my
-200px位置上形成的。</p> I A=\c
<p onClick="alert(this.innerHTML)"> <span class="sample" f0g_Gn $
style="width: 200px; height: 70; color: white;" n*AN/LBp
>Ttop.cn</span><span class="sample" vl s+E o]
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);" ^' sy hI\
>Ttop.cn</span> </p> V2m=
m}HQ
<h2>Outline Text</h2> c;
1 f$$>b
<p>用mask, glow and chroma三个滤镜联合作用</p> l~1l~Gx_&n
<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> 7}mr C@[i
<h2>与Marquee的完美结合</h2> 8RZqoQDH
<p onClick="alert(this.innerHTML)"> <span class="sample" \$,;@H5I^
style="width:320px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" )DQcf]I
><marquee width:300 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> ,}^;q58
<span class="sample" 0)v X
style="position: relative; left: -320; top: -15; width: 320; color: #2984ff;"> ] *rK;
<marquee width:320 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> </p> {I$zm
VG
</div>
|
|
|
|
[楼 主]
|
Posted: 2006-04-05 09:03 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> Css不朽的经典—3D文字特效
