关闭

RevealTrans滤镜特效小记

标签: transitionhtmlbuttonfilterfunctioninput
544人阅读 评论(0) 收藏 举报
分类:
今天无意发现一个人网站在页面转换之间很眩,所以就顺便看了一下他的页面,顺藤摸瓜,就找到了RevealTrans。既然它这么好玩,那就顺便学习一下,下面我就做一个学习总结。
    首先,它的功能是:使用预定义的24种效果之一来展示某物件新的内容。使用方法为:RevealTrans(duration=转换的秒数,transition=转换的类型),那么接下来给你介绍的就是它的24种效果。
                    css069.gif
它可以用在整个页面上,也可以用在页面的某一个物件上,如果用在页面上只需要在<head></head>之间写一行代码:
 
<META http-equiv='Page-Exit’ CONTENT='RevealTrans(Duration=0.5,Transition=23)'>

即可。在物件上的应用,我从msdn上找到了一个很好的例子,把代码贴在下面:
<html>
<head>
<SCRIPT>
function go() {
    oSpan.filters[
0].Apply();
    
if (oSpan.style.visibility == "visible"{
        oSpan.style.visibility 
= "hidden";
                oSpan.filters.revealTrans.transition
=0;
    }

    
else {
        oSpan.style.visibility 
= "visible";
                oSpan.filters[
0].transition=1;
    }

    oSpan.filters[
0].Play();
}

</SCRIPT>
</head>
<body>
<INPUT TYPE="BUTTON" VALUE="Play Transistion" onclick="go();" />
<SPAN  ID=oSpan STYLE="position:absolute; Visibility:visible;
        Filter:revealTrans(duration=1, transition=0);
        width:300; height:300; background-color: lightgreen;"
>
    
<CENTER style="background-color=red; height=100; width:100;
            position:relative; top:100"
>
    
</CENTER>
</SPAN>
</body>
</html>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:400563次
    • 积分:7435
    • 等级:
    • 排名:第2918名
    • 原创:334篇
    • 转载:23篇
    • 译文:1篇
    • 评论:52条
    文章分类
    最新评论