filter：revealTrans

最新推荐文章于 2014-10-22 13:23:00 发布

y376781526

最新推荐文章于 2014-10-22 13:23:00 发布

阅读量1.1k

点赞数

分类专栏： css+div+js 文章标签： filter transition div function class

本文链接：https://blog.csdn.net/y376781526/article/details/4028817

版权

css+div+js 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

filter:revealTrans是以个动态滤镜，它能产生23种不同的动态切换效果。如下：

切换效果   Transition参数值      切换效果       Transition参数值 
矩形从大至小      0              随机溶解             12 
矩形从小至大      1            从上下向中间展开      13 
圆形从大至小      2            从中间向上下展开      14 
圆形从小至大      3            从两边向中间展开      15 
向上推开          4            从中间向两边展开      16 
向下推开          5            从右上向左下展开      17 
向右推开          6            从右下向左上展开      18 
向左推开          7            从左上向右下展开      19 
垂直形百叶窗      8            从左下向右上展开      20 
水平形百叶窗      9            随机水平细纹         21 
水平棋盘          10          随机垂直细纹        22 
垂直棋盘          11          随机选取一种特效     23 
 
下面介绍filter：revealTrans的使用：
filter：revealTrans有两个属性transition和duration。transition是指切换的效果，值为数字（1-23）;duration是切换
间隔时间，以秒为单位。
首先，创建以个revealTrans：
<style type="text/css">
.mytrans{filter:revealTrans(transition=12,duration=3);}
</style>
然后，插入以个层div：
<div id="nav" style="height:200px;width:300px;background:red;" class="mytrans">
</div>
在然后，在<body>中加入οnlοad="show();"
最后，用js控制div中的内容:
<script type="text/javascript">
var img=new Array();
img[0]="";
img[1]="";
img[3]="";
......
var start=0;
function show()
{
    nav.filters[0].apply();
    nav.filters.revealTrans.transition=23;//随机效果
    nav.innerHTML=img[start];
    nav.filters[0].play();//开始执行
    start+=1;
    if(start>=3)
    start=0;
    setTimeout("show()",3000);
}
</script>

y376781526

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
filter：revealTrans

filter:revealTrans是以个动态滤镜，它能产生23种不同的动态切换效果。如下：切换效果 Transition参数值切换效果 Transition参数值矩形从大至小 0 随机溶解 12 矩形从小至大 1 从上下向中间展开 13 圆形从大至
复制链接

扫一扫