常州五颜六色网络技术有限公司 -> 网站建设 -> Css不朽的经典—3D文字特效 登录 -> 注册 -> 回复主题 -> 发表主题

阿七 2006-04-05 09:03
效果: uqD|j:~ =k  
&Xc=PQ:I  
3D Text MdFFt:y:  
以下是一个用了blur滤镜而另一个没用的叠加效果 v4K! BW  
O`I}Lg]~q  
Ttop.cn Ttop.cn ,fhF-%Q!g  
mM~&mAa+Z  
Glass Text W*?qOq {  
这个是两个都用了alpha滤镜的效果 )3O#T$h  
z "z  
Ttop.cnTtop.cn f@q.kD21  
 6@"E*-z$  
Inner Shadow 1Y%lt5,*  
这个是先用了一段白色的文字,再加了mask()滤镜,再用了shadow()滤镜,最后加入chroma()滤镜形成后一段字体,放在前一段文字的相对left: -200px位置上形成的。 HXX9D&c4R  
76] Z~^Y  
Ttop.cnTtop.cn Qn~{TZz  
ko|M 2\  
Outline Text S(^YTb7  
用mask, glow and chroma三个滤镜联合作用 BS?i!Bm7  
R+!oPWfb  
Ttop.cn Udf\;G@  
:hcOceNz  
与Marquee的完美结合 K:% MhH-  
www.Ttop.cnwww.Ttop.cn !T2{xmHKv$  
{=,G>p  
源代码: rP,|  
j'Q0 DF=GV  
<style type="text/css"> BG)zkn$  
<!--  !VXy67  
.sample ,L<x=Dg  
font-style: italic; font-family: arial black;font-size: 40px; font-weight: bold; cursor: hand; %%I:L~c  
`Y+ R9bd  
--> &y7 =tEV  
</style> 2pv by`P4  
<title>Css不朽的经典—3D文字特效</title> /|#2ehE  
<div> #f;6Ia>#  
<h2>3D Text</h2> f="ZplW  
<p>以下是一个用了blur滤镜而另一个没用的叠加效果</p> +]GP"yv-  
<p onClick="alert(this.innerHTML)"> <span class="sample" @P>>:002/  
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" B5h)F> &G  
>Ttop.cn</span><span class="sample" ]Nw ]po+  
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;"> B*E"yB\NV  
Ttop.cn</span> </p> W voIh4]  
<h2>Glass Text</h2> b6H7>x  
<p>这个是两个都用了alpha滤镜的效果</p> HRQfT>"/  
<p onClick="alert(this.innerHTML)"> <span class="sample" b|may/xWH  
style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);" T00sYoK  
>Ttop.cn</span><span class="sample" U%Hcc k'  
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);" }sJ}c}b  
>Ttop.cn</span> </p> YHke^Ind  
<h2>Inner Shadow</h2> *a0#PfS[  
<p>这个是先用了一段白色的文字,再加了mask()滤镜,再用了shadow()滤镜,最后加入chroma()滤镜形成后一段字体,放在前一段文字的相对left: Sn 7 h$  
-200px位置上形成的。</p> I2NMn5>  
<p onClick="alert(this.innerHTML)"> <span class="sample" s jaaZx1  
style="width: 200px; height: 70; color: white;" R#?atL$(  
>Ttop.cn</span><span class="sample" PI9aKNt  
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);" O<mA+yk  
>Ttop.cn</span> </p> BT ^=p  
<h2>Outline Text</h2> 7:=(yBG  
<p>用mask, glow and chroma三个滤镜联合作用</p> h/y0Q~|/d  
<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> /QCg E ~  
<h2>与Marquee的完美结合</h2> 4x=sJ%E  
<p onClick="alert(this.innerHTML)"> <span class="sample" qI tbY%  
style="width:320px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" \ f VX<L  
><marquee width:300 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> Jy[rA<x$  
<span class="sample" 2#CN:b]+  
style="position: relative; left: -320; top: -15; width: 320; color: #2984ff;"> Sht3\cJ8  
<marquee width:320 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> </p> v}z^M_eFm  
</div>


查看完整版本: [-- Css不朽的经典—3D文字特效 --] [-- top --]



Copyright © 2005-2014 5y6s Inc. 苏ICP备05001866号 Powered by PHPWind 5.0.1
Time 0.008846 second(s),query:3 Gzip enabled