阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
Css不朽的经典—3D文字特效
效果： JJ2_h VU
*<jAiB ,O*
3D Text S:oi< F
以下是一个用了blur滤镜而另一个没用的叠加效果 qr4pR-Gdr
>TnTnF WX
Ttop.cn Ttop.cn v>Yb/{ A
Y^7$t^&
Glass Text nv%rJy*w [
这个是两个都用了alpha滤镜的效果 * @v)d[z_
>
BY&,4r
Ttop.cnTtop.cn %gyL CTw
:'3XAntZA
Inner Shadow t2I5hSf
这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: -200px位置上形成的。 2w_W Adi
4
c$ zKqz
Ttop.cnTtop.cn S=<}:#;u0
Ov4y %Pj
Outline Text y8L D7<1u
用mask, glow and chroma三个滤镜联合作用 qnJt5
c5l.B#-lY
Ttop.cn TI#''XCB5
^ZhG>L*
与Marquee的完美结合 Z!@~>i
www.Ttop.cnwww.Ttop.cn , ^;)<[
lBhLf@
源代码： :x{NBvUIc
%K` % *D
<style type="text/css"> wsN?[=l{s
<!-- C\nhqkn
.sample !z<%GQ CT
font-style: italic; font-family: arial black;font-size: 40px; font-weight: bold; cursor: hand; r77PQQD T
.k9{Yv0
--> !+4cqO
</style> %8D z o
<title>Css不朽的经典—3D文字特效</title> {>,V\J0p
<div> ZAUQJS 91E
<h2>3D Text</h2> F;[T#N:~
<p>以下是一个用了blur滤镜而另一个没用的叠加效果</p> UkHY[M7;
<p onClick="alert(this.innerHTML)"> <span class="sample" IWveW8qJ
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" 13%t"-@bh
>Ttop.cn</span><span class="sample" P*@2.#oO
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;"> }kK[S|XVO
Ttop.cn</span> </p> WN5`;{\
<h2>Glass Text</h2> lGk{LO)
<p>这个是两个都用了alpha滤镜的效果</p> 0} FOV`n
<p onClick="alert(this.innerHTML)"> <span class="sample" L%$|^T=%
style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);" MXiQ1 x
>Ttop.cn</span><span class="sample" RUUk
f({(
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);" !!V#v9{
>Ttop.cn</span> </p>
-
0Tnh;&=
<h2>Inner Shadow</h2> c$`
4*
6
<p>这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: 2gjGeM
-200px位置上形成的。</p> j.ldaLdG
<p onClick="alert(this.innerHTML)"> <span class="sample" q@~L&{
style="width: 200px; height: 70; color: white;" ',4x$qe
>Ttop.cn</span><span class="sample" Xy5s^82?
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);" pdb1GDl0q
>Ttop.cn</span> </p> m8JR@!t7
<h2>Outline Text</h2> 0\~Z5k`IT
<p>用mask, glow and chroma三个滤镜联合作用</p> c$,_>tc P
<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> A[dvEb;r
<h2>与Marquee的完美结合</h2> u@P[Vb
<p onClick="alert(this.innerHTML)"> <span class="sample" L~/qGDXC?
style="width:320px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" HXVBb%pP
><marquee width:300 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> }o,z!_^PLQ
<span class="sample" 4^' 3&vu
style="position: relative; left: -320; top: -15; width: 320; color: #2984ff;"> G>Em! 4h
<marquee width:320 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> </p> O^I[
(8Y8
</div>
|
|
|
|
[楼 主]
|
Posted: 2006-04-05 09:03 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> Css不朽的经典—3D文字特效
