RevealTrans滤镜特效小记

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

shanliwa

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

阅读量921

点赞数

分类专栏： JS 文章标签： transition html button filter function input

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/shanliwa/article/details/1803382

版权

JS 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了RevealTrans特效工具的使用方法，包括24种不同的页面转换效果，并提供了实际应用案例，展示了如何在网页中实现这些酷炫的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天无意发现一个人网站在页面转换之间很眩，所以就顺便看了一下他的页面，顺藤摸瓜，就找到了RevealTrans。既然它这么好玩，那就顺便学习一下，下面我就做一个学习总结。

首先，它的功能是：使用预定义的 24种效果之一来展示某物件新的内容。使用方法为： RevealTrans (duration= 转换的秒数，transition=转换的类型），那么接下来给你介绍的就是它的24种效果。

它可以用在整个页面上，也可以用在页面的某一个物件上，如果用在页面上只需要在<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 >

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。