阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
Css不朽的经典—3D文字特效
效果：
V' AZs;
Ct 0%3]<J
3D Text I
y2AJ|d.
以下是一个用了blur滤镜而另一个没用的叠加效果 'fIG$tr9X
=Q8$O
2TW
Ttop.cn Ttop.cn ,*wj ~NE
ra]\!;}L0
Glass Text mW."lzIl
这个是两个都用了alpha滤镜的效果 A:?w1"7gT
*%dWNvN4X
Ttop.cnTtop.cn n(\VP!u5r
(X Ql2C
Inner Shadow oX-h7;SD
这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: -200px位置上形成的。 3
J\&t4q
-PH qD
Ttop.cnTtop.cn q%FXox~b
SA6.g2pFz
Outline Text [u8J qX
用mask, glow and chroma三个滤镜联合作用 1L. yh U\
E2|c;{ c
Ttop.cn J]Qb g7|
D^2yP~(
与Marquee的完美结合 !'%`g,,r
www.Ttop.cnwww.Ttop.cn b .v^:M
(2%z9W
源代码： CA ,0Fe3
B ? D|B
<style type="text/css"> 51x)fZQ
<!-- !CuLXuM
.sample YS&Q4nv-
font-style: italic; font-family: arial black;font-size: 40px; font-weight: bold; cursor: hand; \YsYOFc|
8Vqh 1<
--> WUq fY?5
</style> v"smmQZik
<title>Css不朽的经典—3D文字特效</title> ,(CIcDJ2U_
<div> V$<5`
<h2>3D Text</h2> ) 3~):+
<p>以下是一个用了blur滤镜而另一个没用的叠加效果</p> +0WI;M4i
<p onClick="alert(this.innerHTML)"> <span class="sample" /CN`U7:E
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" )k| _ CW~
>Ttop.cn</span><span class="sample" /
L/hR4
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;"> B@2VI
1%
Ttop.cn</span> </p> Kdwt^8Umh
<h2>Glass Text</h2> 2N:|B O>
<p>这个是两个都用了alpha滤镜的效果</p> /__@a&9t
<p onClick="alert(this.innerHTML)"> <span class="sample"
[Dq!t1
style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);" DZ Q=Sinry
>Ttop.cn</span><span class="sample" BSB;0O M
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);" ~1v5
H]T{
>Ttop.cn</span> </p> +1%7*2q,
<h2>Inner Shadow</h2> UL.x*@o
<p>这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: h|j $Jy
-200px位置上形成的。</p> 0xYPK7a=L\
<p onClick="alert(this.innerHTML)"> <span class="sample" -r5JP[0kP
style="width: 200px; height: 70; color: white;" <r'l5|er
>Ttop.cn</span><span class="sample" usR: -1{
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);" u
6(O;
>Ttop.cn</span> </p> ?W(>Yefk
<h2>Outline Text</h2> 5dE@ePO[/9
<p>用mask, glow and chroma三个滤镜联合作用</p> 3b2[i,m<L
<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> EBX+fzjQo
<h2>与Marquee的完美结合</h2> hY
@rt,! 8
<p onClick="alert(this.innerHTML)"> <span class="sample" BB694
style="width:320px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" eZMDt B
><marquee width:300 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span>
1]i{b/ 4
<span class="sample" ShV# XnQ
style="position: relative; left: -320; top: -15; width: 320; color: #2984ff;"> , 33[/j
<marquee width:320 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> </p> $ 6ev K~
</div>
|
|
|
|
[楼 主]
|
Posted: 2006-04-05 09:03 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> Css不朽的经典—3D文字特效
