今天接着学习CSS,不过是专门看滤镜,一边看一边做,感觉学是不错的~
一、Alpha,产生渐变,
主要属性有:
opacity:开始的透明度,0~~100;
finishopacity:结束的透明度,0~~100:
style:形状,0均匀,1直线,2圆,3矩形;
startX开始的X坐标,
startY开始的Y坐标,
finishX结束的X,
finishY结束的Y,
二、blur，动态模糊
属性：
add是否显示原来的对象。0显1不显，默认1，
direction方向，0~~360，每45为一个单位
strength模糊的大小，默认为5px
三、dropshadow 阴影，好像两个对象
属性；
color,
offx 左右偏移量，右正，左负，
offy 上下偏移量，下正，上负，
positive 阴影透明度，0透明，1不透明，
四、glow,光圈效果，
属性：
color,
strength,光圈大小，1--255
五、gray,去色，主要用于黑白图像，style="filter: gray"
六、invert反转色，主要用于底片效果，style="filter: invert"
七、xray 加亮，X光片的效果，有点吓人，style="filter: xray"
八、fliph，水平转180度，style="filter: fliph"
九、flipv，垂直转180度， style="filter: flipv"
十、wave ，垂直的波浪，
属性：
add,是否显示原来的对象，0不显，1显，默认0
freq,波浪数，正数。
strength,波浪的振幅，像素
lightstrength,波浪上光的照射强度，0--100
phase,正弦波的起始位置，0-100
十一、shadow,阴影加渐变，
属性：
color,
direction方向，45度为一单位，360最大，
十二、mask印章效果，
只有color属性，
十三、chroma,指定某个色变为透明，只有color属性。
十四、BlengTrans(淡入或淡出效果),Revealtrans（23种特效。）
要配合JS用才爽，有0--22个效果可选取，得是23是0--22的随机。
tyle="filter: revealtrans(duration=2,transition=23)"
在配合JS的时候要注意一下：
p.filters.revealTrans.Transition=ra;
p.filters.revealTrans.apply();
先给控件应用滤镜，
p.src=arrays[i];
再给控件付值。
p.filters.revealTrans.play();
最后播放它，顺序不能搞错了。不然不得行，，我搞了半天才发现。，，太哈了，，
最后，放一个刚做的小东西上来，
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>小小的东西</title>
<link href="we.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<div style="height:100px">
<span class="s1">仅以此图送-- </span>
<br />
<span class="s2">与我走过三年历程的宝贝：</span>
<br />
<span class="s3">我的老婆</span>
</div>
<div style="width: 400px; height: 300px; filter: Alpha(opacity=10,finishopacity=80,style=1,startX=0,startY=0,finishX=400,finishY=300)">
<img id="pics" src="我们2.jpg" width="400px" height="250px" style="filter: revealtrans(duration=2,transition=23)" />
<div style="width: 400px; height: 50px; filter: blur(direction=180,add=0)" align="right">
<input type="button" value="<<" onclick="turn('less')" />
<input type="button" value=">>" onclick="turn('more')" />
</div>
</div>
</body>
<script type="text/javascript">
var arrays=new Array();
arrays[0]="1.jpg";
arrays[1]="2.jpg";
arrays[2]="3.jpg";
arrays[3]="4.jpg";
arrays[4]="5.jpg";
arrays[5]="6.jpg";
arrays[6]="7.jpg";
arrays[7]="8.jpg";
arrays[8]="9.jpg";
var i=0;
function turn(sign)
{
if(sign=="less")
{
if(i>0)
{
i--;
}
else
{
i=arrays.length-1;
}
}
else
{
if(i<arrays.length-1)
{
i++;
}
else
{
i=0;
}
}
show();
}
function show()
{
var p=document.getElementById("pics");
var ra=Math.floor(Math.random()*23);
p.filters.revealTrans.Transition=ra;
p.filters.revealTrans.apply();
p.src=arrays[i];
p.filters.revealTrans.play();
}
</script>
</html>
