演示中小阳用了以下这幅图片:
8 Y$ I" O# O+ {3 r% }& E N9 e" V9 i/ x1 Y w. a
" h0 K& `* y- w ~6 r9 k) f
6 |8 P# }& Q) F
% A/ U' K/ w r
0 t4 b3 u- U: ^) y1 [& a. j1 \ 这是很简单的动画,只是元件位置的移动而已,自己做一个也不难吧。下面介绍实现的代码:
# j& q8 m( \6 n: i1 E& d
7 B; m3 c" l2 l( q& l6 X; X4 s1 Y
& n9 z- ?4 D' A( _" c+ `!-- 第一步,设置背景图片。我们把它的尺寸设到最小,因为它会被“撑大”。黑色背景的设置是为防止图片加载错误时文字看不到 --
/ { m* A) \. u& S5 h! l
div style="background:url(mcolor.gif);background-color:#000000;width:1;height:1"
- O9 e4 w R+ m
) Z. [- d G( V4 ^7 ?$ b!-- 第二步,用Chroma()滤镜把红色设为透明色。为了只是文字透明,我们设置了白色的背景色作掩盖 --
9 B( D; ?5 c, ^1 P X8 c
div STYLE='FILTER:Chroma(color=#FF0000);background-color:#FFFFFF;width:1;height:1;'
+ l" `9 l; t2 p1 V4 t; w
3 P2 U+ P, H/ X!-- 第三步,把文本输入框的文字颜色设为红色 --
; T: [/ t, D$ T2 _9 @4 Uinput type="text" name="text" size="25" style="color:#FF0000;border:1px solid #000000;" value="这是输入框中的渐变色文字"
% f6 h3 W% W' z8 F, Y: o7 h6 `! [+ m" [2 K" Y
!-- OK,结束所有标签 --
- K" D6 @8 B7 q l' ]) {* ]
/div
- ~8 [4 [2 t4 ^+ n) S7 B2 W
; a, I1 K- I$ h ^& W" I% g1 g B! e) _7 p( t- J% u9 S
/div