revealTrans的神奇运用

最新推荐文章于 2021-06-04 01:02:59 发布

清箫

最新推荐文章于 2021-06-04 01:02:59 发布

阅读量5.2k

点赞数

分类专栏：学习文章标签： transition javascript filter firefox function html

本文链接：https://blog.csdn.net/woxueliuyun/article/details/3576996

版权

学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

CSS的RevealTrans动态滤镜能产生23种动态效果.

如果是对整个网页进行操作, 只要在网页源代码的< head >与< /head >之间插入这样一行类似这样的代码：< Meta content=revealTrans(Transition=14,Duration=3.0) http-equiv=Page-enter >，当你进入这个页面时，网页将象拉幕一样从中间向两边拉开!
RevealTrans滤镜只有两个参数，Duration：是切换时间，以秒为单位；Transition：是切换方式，它有24种方式，详见下表：

因此，你只要改变RevealTrans滤镜的“Transition"的值，就能获得不同的网页切换效果. 但有一个缺点，要把RevealTrans滤镜用于网页中的某个对象必须借助于Javascript才能实现，这就是说要动手编程序了。
首先给某个对象设置style, 并设置过滤器类型: "filter:revealTrans(Transition=12, Duration=5)";

注意: filter样式只有IE4+才支持, firefox3.0目前还不支持.

在javascript中写入这样的代码就可以运用了.
div.filters[0].apply();
div.innerText="Hello";
div.filters[0].play();
// 设置每段字幕演示的时间，以毫秒计。

示例:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<script>
   function disappear(){
  content.filters[0].apply()
        content.innerHTML = "<span style='color:cc0099;font-size:30;'>Good</span>"
        content.filters[0].play();
   }
</script>
</head>
<body οnlοad="disappear()">
    <div id="content" style="filter:revealTrans(transition=12, duration=5); position:absolute;
   text-align:center; top:150px; left:93px; height:200px; width:559px">
      <span style='color:cc0099;font-size:30;'>HELLO</span>
</div>
</body>
</html>

清箫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
revealTrans的神奇运用

CSS的RevealTrans动态滤镜能产生23种动态效果.如果是对整个网页进行操作, 只要在网页源代码的与之间插入这样一行类似这样的代码：，当你进入这个页面时，网页将象拉幕一样从中间向两边拉开!RevealTrans滤镜只有两个参数，Duration：是切换时间，以秒为单位；Transition：是切换方式，它有24种方式，详见下表：因此，你只要改变RevealTrans滤镜的“T
复制链接

扫一扫