发新话题
打印

CSS滤镜之Wave属性

CSS滤镜之Wave属性


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的值就可以了。您也可以多试试,改变其他的参数值,还可以达到许多不同的效果来。



点击图标进入精品网摘收藏 欢迎大家加入网络收藏夹

TOP

发新话题