CSS滤镜简单应用

最新推荐文章于 2024-10-10 16:54:25 发布

VS_URL

最新推荐文章于 2024-10-10 16:54:25 发布

阅读量449

点赞数

分类专栏： css 文章标签： css filter function javascript div table

本文链接：https://blog.csdn.net/VS_URL/article/details/7486856

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、跑马灯

主要是应用Aphla滤镜完成：

<marquee style="filter : alpha(opacity=100,style=3,finishOpacity=20,startx=0,starty=0,finishx=100,finishy=100);height:20px;">跑马灯程序的代码为:{ filter: Alpha(Opacity=100, FinishOpacity=20, Style=2, StartX=0, StartY=0, FinishX=100, FinishY=100)}；
    </marquee>

二、淡入淡出效果

使用BlendTrans滤镜：

<body οnlοad="playImg()">
     <div>
    <script language="javascript" type="text/javascript">
  //将图片路径放入数组中
     ImgNum=new ImgArray(3);
  ImgNum[0]="1.jpg";
  ImgNum[1]="2.jpg";
  ImgNum[2]="3.jpg";
  
  //设置数组的长度
  function ImgArray(len)
  {
   this.length=len;
  }
  
  var i=1;
  
  //转换过程
  function playImg()
  {
   if(i==2)
    i=0;
   else i++;
   imgpic.filters[0].apply();
   imgpic.src=ImgNum[i];
   imgpic.filters[0].play();
   
   timeout=setTimeout("playImg()",4000);
  }
    </script>
    <img alt="" src="1.jpg" style="filter : BlendTrans(duration=3)" id="imgpic" height="437" width="750" />
    </div>
</body>

三

<div>
        <table  style="width:100%">
        	<tr>
                <td style="filter:Blur(add=true,direction=90,strength=30);width=100%;">
                	<img src="1.jpg" width="300" height="200" />
                    <br />CSS--Blur滤镜
                </td>
            </tr>
            <tr>
                <td style="filter : DropShadow(color=gray,offx=8,offy=5,positive=true);width:100%; height:30px; font-weight:bolder;">
                	<img src="1.jpg" width="300" height="200"/><br />CSS--DropShadow滤镜
                </td>
            </tr>
            <tr>
            	<td style="filter:Glow(color=gray,strength=10)">
                	<img src="1.jpg" width="300" height="200" style="margin:20px;"/><br />CSS--Glow滤镜
                </td>
            </tr>
            <tr>
            	<td style="filter:Gray()">
                	<!--应用于图像，将一幅图铃转变为灰色图-->
                	<img src="1.jpg" width="300" height="200" style="margin:20px;"/><br />CSS--Gray滤镜
                </td>
            </tr>
            <tr>
            	<td style="filter:Invert()">
                	<!--反相显示对象内容(使图像类似于底片的效果)-->
                	<img src="1.jpg" width="300" height="200" style="margin:20px;"/><br />CSS--Invert滤镜
                </td>
            </tr>
            <tr>
            	<td style="filter:Mask(color=black)">
                	<!--遮罩，使用一个颜色图层将包含有文字或图像等对象的区域遮盖，但是文字或图像部分
                    却以背景色显示出来（Mask滤镜不能应用于图像文件以实现相应的效果）-->
                	CSS--Mask滤镜
                </td>
            </tr>
            <tr>
            	<td style="filter:shadow(color=gray,direction=90,strength=10)">
                	<!--shadow滤镜同Dropshadow滤镜一样为页面对象设置投影。但是Dropshadow滤镜利用偏移量来定义
                    投影位置，而Shadow滤镜能够在指定的方向上设置投影，且投影产生渐进的效果-->
                	<img src="1.jpg" width="300" height="200" style="margin:20px;"/><br />CSS--shadow滤镜
                </td>
            </tr>
            <tr>
            	<td style="filter:wave(add=true,freq=3,lightstregth=20,phase=45,strength=20);font-size:72pt; font-weight:bold; color:			rgb(189,1,64)">
                	<!--Wave滤镜可使页面对象产生波纹变形-->
                	<img src="1.jpg" width="300" height="200" style="margin:20px;"/>
                    <img src="1.jpg" width="300" height="200" style="margin:20px;filter:wave(add=true,freq=20,lightstregth=50,phase=60,strength=50);font-size:72pt; font-weight:bold; color:rgb(189,1,64);!important"/>
                    <br />happy  CSS--wave滤镜
                </td>
            </tr>
        </table>
    </div>
 
 以下为第三部分的页面效果图：