Wave属性用来把对象按照垂直的波纹样式打乱。它的表达式如下:
7 d3 D) `5 Q0 k5 V4 [
' N; ~0 S; a( }) B7 m: I Filter:Wave(Add=True(False),Freq=频率,LightStrength=增强光效,
- [! o& p# l/ w% _5 g Phase=偏移量,Strength=强度)
6 [, J- Q: f7 K; l/ c
; t2 @& Q$ H( E" K% Y1 K 我们看到Wave属性的表达式还是比较复杂的,它一共有五个参数。Add参数有两个参数值:True代表把对象按照波纹样式打乱;False代表不打乱;
) o. K4 s" T" g5 r, P6 q7 w `9 D5 Z3 }0 B Freq参数指生成波纹的频率,也就是指定在对象上共需要产生多少个完整的波纹。 LightStrength参数是为了使生成的波纹增强光的效果。参数值可以从0到100。 Phase参数用来设置正弦波开始的偏移量。这个值的通用值为0,它的可变范围为从0到100。这个值代表开始时的偏移量占波长的百分比。比如该值为25,代表正弦波从90度(360*25%)的方向开始。
: u6 n, B0 P7 {2 B! ^$ u! x+ c S 说了一大堆,我们还是先看一个实例吧。比如下面这幅图片:
u8 n0 I& W" ]9 B, A( c/ C6 V
6 D: D! S* `, G) @1 t* s* J" |; _! K8 E: H / w4 B7 c9 e" o a
7 @5 y8 |; K# x. L( U3 M6 O. ~% q' s2 D0 Y' V( J
i& L9 |0 i' I( K5 ]( D
2 t; f$ t& Q a. q# p; X' k# w9 z* m2 c' s5 X/ N& o4 s2 c
+ J7 l+ D8 U: H2 x* R6 p, ^下面我们对上面这个页面加上Wave效果,代码如下:
& d4 Y# x9 I- I' Q$ [8 s% r
3 U9 F6 o. e: Q# ?0 u# x html
+ I3 Q5 L& [" w3 [
head
( C1 Y `( P) k$ f& p
title wave css/title
* C' d _1 m* E* T6 i
style//*定义CSS 样式开始*//
- J9 D9 q* ]3 _! O* H0 x# N* G& D* K
!--
5 L, x! t* u- q# I) Q7 j- @
.leaf{position:absolute;top:10;width:300;
( [" @' B/ A0 |' R, c( h6 G filter:wave(add=true,freq=3,lightstrength=100,
; m) E6 N. U6 Q4 I phase=45,strength=20);}
$ S( H- F* e9 L4 J! u! C
//*设置leaf类的样式,绝对定位,wave属性,产生3个波纹, 光强为100,波纹
. |2 x- q' U O& K/ W o) g 从162度(360*45%)开始,振幅为20*//
1 y$ i7 I6 ^) ^ img{position:absolute;top:110;left:40;
$ i/ L+ z1 W+ l0 h8 I, M
filter:wave(add=true,freq=3,lightstrength=100,
! E' f6 x& z; }; b2 o
phase=25,strength=5);}
6 ~4 w5 ^+ v) |7 y. F //*设置IMG的样式,绝对定位,wave属性,产生3个波纹,光强为100,波纹从
2 k+ {" o# g' U" j+ Q 90度开始,振幅为5*//
) C* y' Z' {" p3 e# ^1 ^0 ] --
" ]& v# H& J$ w2 m /style
! c3 ^4 q7 U# Z r
/head
2 j2 M& m) {( }1 \4 @
body
, V% E, V m0 b9 W8 @ div class=“wave”//*定义DIV区域内为Wave类*//
7 f3 \+ X1 a) \- h: I1 d p style=“font-family:lucida handwriting;
* V( y4 m% ^5 [
font-size=72pt; font-weight:bold;
" }$ I* d* p5 h color:rgb(189,1,64);”Leaf/p
: c9 U/ _: d. c7 G# H
//*设置字体名称、大小、粗细、颜色*//
% e2 @0 _' C* b8 v0 ~! [' } /div
( M+ U3 a8 }. |5 ~) M7 v/ z+ \
pimg src=“ss01044.jpg”/p //*导入图片*//
0 c3 S6 |( ?3 e: w/ c' V! V
/body
( d* q3 P8 s1 [& ^: I /html
; t3 ]0 ]2 W' ]
7 ^8 ]) ]- M9 Q. m( L5 W2 Z& X 这段代码实现的效果如下图:
9 u1 Y0 q7 Y8 T1 S* q J$ K0 q
! l/ @/ y% b0 a, A% R1 j4 j' f' U- v( x3 K) a7 N( Z
+ a( b2 G+ A2 [9 Q9 B $ f4 s! T- x2 [4 h. w; m+ O! @0 ^
3 d; m4 c8 Y# X' U
如果把Wave的参数随便做一下改动,就会达到多种效果,请看另外一种效果:(如下图):
3 a. {3 Y K- h: t4 o
2 n0 @" [9 [' e! ?+ j( g0 [, D" F1 T0 k+ B3 G; T
1 K0 ~. G: ]6 M. E6 m# W* k
! E$ g0 d) g, F% N# i4 Q
3 \7 @2 _3 b5 h% c 其实这种效果只是增大了freq参数的值,减小了Strength、LightStrength的值就可以了。您也可以多试试,改变其他的参数值,还可以达到许多不同的效果来。