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

css3高级滤镜-渐隐效果

2016-05-04 13:22 375 查看

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>渐隐滤镜效果</title>

<style type="text/css">

.blendtrans{

filter:blendTrans(duration=3);

}

</style>

</head>

<body onload="playimg()">

<h1>渐隐（BlendTrans）滤镜</h1>

<ul>

相关参数：

<li>1.enabled:表示滤镜是否被激活</li>

<li>2.duration：表示转换过程所需要的时间，单位为秒</li>

</ul>

<ul>

实例：

<img src="img/11.jpg" class="blendtrans" 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>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航