您的位置：首页 > Web前端 > CSS

css3高级滤镜-切换滤镜

2016-05-04 13:23 387 查看

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>切换滤镜（RevalTrans）</title>

<style type="text/css">

.revaltrans{

filter:revalTrans(Duration=3,Transition=10);

}

</style>

</head>

<body >

<h1>切换滤镜</h1>

<ul>相关参数:

<li>1.是否激活滤镜</li>

<li>2.duration：设置用于切换的停留时间</li>

<li>3.transition:用于指定转换方式</li>

<ul>实例：

<img src="img/11.jpg" class="revaltrans" id="imgpic">

<script>

//声明数组，数组元素的个数就是图片的个数，然后给数组元素赋值，值为图片的路径

imgnum=new ImgArray(2);

imgnum[0]="img/1.jpg";

imgnum[1]="img/3.jpg";

//获取数组的记录数

function ImgArray(len){

this.length=len;

}

var i=1;

//转换过程

function playimg(){

if(i==1)

{

i=0;

}

else{

i++;

}

imgpic.filters[0].apply();

imgpic.src=imgnum[i];

imgpic.filters[0].play();

//设置演示时间，4000表示延迟4秒，

//滤镜中设置的转换时间值，当转换结束后还停留了一段时间

timeout=setTimeout("playimg()", 4000);

}

</script>

</ul>

</ul>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航