BlendTrans濾鏡比起上一篇介紹的Revealtrans濾鏡來要簡單一些，它只有一個參數：Duration 變換時間，它的功能也比較單一，就是產生一種淡入淡出的效果，不過它的這種效果比起RevealTrans濾鏡的淡入淡出效果來要精細的多，你看看下面也就不言而喻了。
　　由于是動態轉換，上面只是我抓的三張圖片，只能幫助你了解其轉換過程，真正的效果只有待你按我下面講的方法動手做出來才能看到。使用BlendTrans濾鏡也和Revealtrans濾鏡一樣，需要借助于Javascript來調用它的方法來實現，我們現在就以實現上面這種效果為例來看看如何使用BlendTrans濾鏡，首先你必須準備幾張同樣大小的圖片。
　　制作方法：
　　1、用老辦法（前面的文章已介紹了多次）制作一個BlendTrans濾鏡，取名為“myblen"，Duration設置為“3"（即轉換時間為3秒），濾鏡設置好后，在網頁源代碼的< head >與< /head >之間將有下面這樣的代碼：
　　< style type="text/css" >
　　< !--
　　　.myblen { filter:blendTrans(Duration=3)}
　　-- >
　　< /style >
　　2、插入第一張圖片，在圖片的屬性面板上給圖片加個名稱：myimg；
　　3、把BlendTrans濾鏡加載到圖片上；這時圖片的“img"標記的代碼是這樣的：< img src="image/cssp1.jpg" width="200" height="134" class="mybend" name="myimg" align="left" >；
　　4、在網頁的源代碼< head >與< /head >之間插入下面這段Javascript程序：
　　< script language="JavaScript" >
　　< !--
　　// 獲取數組記錄數
　　function ImgArray(len)
　　{
　　　this.length=len;
　　}
　　// 申明數組并給數組元素賦值，也就是把圖片的相對路徑保存起來，若是圖片較多，可增加數組元素的個數，
　　// 我在這個例子中只用了三張圖片，所以數組元素個數為“3"。
　　ImgName=new ImgArray(3);
　　ImgName[0]="image/cssp2.jpg";
　　// 你在制作時要把這里的"image/cssp2.jpg"換成你的圖片所在的路徑和圖片文件名；
　　ImgName[1]="image/cssp3.jpg";
　　// 你在制作時要把這里的"image/cssp3.jpg"換成你的圖片所在的路徑和圖片文件名；
　　ImgName[2]="image/cssp1.jpg";
　　// 你在制作時要把這里的"image/cssp1.jpg"換成你的圖片所在的路徑和圖片文件名；
　　var i=1;
　　// 演示變換效果
　　function playImg()
　　{
　　　if (i==2)
　　　{ i=0 ;}
　　　else
　　　{ i++; }
　　myimg.filters[0].apply(); // 這里的“myimg”是你在網頁中插入的那張圖片的代號，
　　myimg.src=ImgName[i]; // 當你改變了插入的圖片代號時，這里也一定要改變，
　　myimg.filters[0].play(); // 否則，程序在變換時可就找不著北了。
　　// 設置演示時間，這里是以毫秒為單位的，所以“6000"是指每張圖片的演示時間是6秒鐘，這個時間值要在于
　　// 濾鏡中設置的轉換時間值，這樣當轉換結束后還停留一段時間，讓人看清楚圖片。
　　mytimeout=setTimeout("playImg()",6000);
　　　}
　　-- >
　　< /script >
　　5、在網頁源代碼的< body >加入這樣的一句代碼：οnlοad="playImg()"。
　　好了，快按F12欣賞你的杰作吧。
　　若是想在圖片上獲得上一篇介紹的RevealTrans濾鏡效果，只要把本例中的濾鏡代碼換一換就行了，動手試試吧！

轉載于:https://www.cnblogs.com/HD/archive/2005/04/28/146928.html

總結

以上是生活随笔為你收集整理的[CSS]BlendTrans滤镜的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。