CSS的滤镜

2007年12月05日 星期三 下午 04:47

今天接着学习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>

你可能感兴趣的:(css)