`

网页变换效果---revealTrans滤镜的用法

    博客分类:
  • Css
 
阅读更多
revealTrans主要有两个参数:Duration和transition.
duration表示持续的时间,而transition表示转换的效果类型.
语法是:object.style.filter="revealTrans(duration=Number,transition=Number)"
除此之外,revealTrans还有三个方法: apply, play和stop,分别为应用转换效果,运行效果和停止效果.



Filter:revealtrans(duration=转换的秒数,transition=转换的类型)

表达式中的transition参数的参数值有24中,以代号0-23来表示,分别代表24中显示类型,具体的参数值列表如下所示:


同时还可以参考一下以下的页面转换特效:

网页变换效果(Trans)共分四大类:
"进入网页"(Page-Enter)、
"离开网页"(Page-Exit)、
"进入站点"(Site-Enter)、
"离开站点"(Site-Exit)。
每一大类又分为25个小类,先用进入网页效果来举例说明:

进入网页时的效果

1.混合效果 代码如下:

<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">

2.盒状收缩效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=0)">

3.盒状放射效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=1)">

4.圆形收缩效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=2)">

5.圆形放射效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=3)">

6.向上擦除效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)">

7.向下擦除效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)">

8.向右擦除效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=6)">

9.向左擦除效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=7)">

10.垂直遮蔽效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=8)">

11.水平遮蔽效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=9)">

12.横向棋盘式效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=10)">

13.纵向棋盘式效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=11)">

14.随即分解效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=12)">

15.左右向中央缩进效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=13)">

16.中央向左右扩展效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=14)">

17.上下向中央缩进效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=16)">

18.中央向上下扩展效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=17)">

19.从左下抽出效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=18)">

20.从左上抽出效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=19)">

21.从右下抽出效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=20)">

22.从右上抽出效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=21)">

23.随机水平线条效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">

24.随机垂直线条效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">

25.随机效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)">

<script type="text/javascript"></script>

<!--自定义字段-->
分享到:
评论

相关推荐

    RevealTrans滤镜的用法

    需要注意的是,尽管RevealTrans滤镜在早期的网页设计中广泛使用,但随着CSS3的普及,现代浏览器更多地支持CSS3的`transition`和`animation`属性,它们提供了更强大、更灵活的动画效果,并且具有更好的浏览器兼容性。...

    图片切换类似幻灯片效果 RevealTrans动态滤镜

    实现图片切换类似幻灯片效果, 一共23种切换效果, 代码十分简单明了, 没有多余的干扰代码, 看后马上就能明白怎样使用动态滤镜. 测试环境: Window XP professional sp3, IE 6.0

    网页制作滤镜代码文档

    总的来说,RevealTrans滤镜是早期网页制作中的一个技术,它提供了一种创建动态文字切换效果的方法。虽然在当前的Web开发标准中已被更现代的技术取代,但了解这种历史技术有助于理解Web发展过程和演变。

    RevealTrans

    关于标签,"图形特效"、"javascript"和"滤镜效果"再次强调了RevealTrans的核心功能。"图形特效"涵盖了视觉上的动态变化,"javascript"表明它是基于JavaScript实现的,而"滤镜效果"则侧重于图像处理方面。 在压缩包...

    滤镜使用方法

    在本篇文章中,我们将详细探讨"滤镜使用方法",包括`alpha`、`blur`、`chroma`、`dropshadow`、`revealtrans`和`shadow`等滤镜,以及它们在不同场景下的应用。 1. **Alpha滤镜**:Alpha滤镜通常与透明度或不透明度...

    CSS滤镜效果介绍.pdf

    标题中的“CSS滤镜效果介绍”指的是CSS中的滤镜(Filter)特性,它允许开发者对网页元素应用视觉效果,如模糊、颜色调整等。描述中提到了CSS静态滤镜样式和动态滤镜,两者都是CSS滤镜的不同使用方式。 1. **CSS静态...

    filters.revealTrans.Transition使用方法小结

    在网页设计和开发中,`filters.revealTrans.Transition` 是一种旧的、基于滤镜(Filter)技术的动画效果,主要用于Internet Explorer浏览器。这种技术主要用于实现过渡效果,比如幻灯片展示。在标题和描述中提到的 `...

    js+css 滤镜 切换图片

    在网页设计中,通过JavaScript和CSS滤镜技术结合使用可以为用户带来更加丰富的视觉体验。本篇文章将详细介绍如何利用这些技术实现一个简单但有趣的图片滤镜切换功能。 #### 核心概念解析 - **JavaScript**: 一种...

    页面进入退出效果0 矩形缩小

    在网页设计与开发中,页面的过渡效果不仅可以提升用户体验,还能增加网站的吸引力。本文将详细介绍一种特定的页面进入与退出效果——矩形缩小(代码中表示为0)。此外,还将探讨其他几种常见的页面过渡效果及其应用...

    HTML页面过渡效果大全

    在探讨HTML页面过渡效果时,我们首先需理解其基本概念:HTML页面过渡效果是指网页在加载、切换或关闭时...同时,随着Web技术的不断进步,开发者还可以探索更多基于CSS3的过渡效果实现方法,以适应更广泛的浏览器环境。

    巧用CSS滤镜制作绚丽图片播放效果

    CSS中有revealTrans滤镜在网页中制作特效非常有用处。这次,我们准备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效果。 实现思路:使用revealTrans滤镜制作出超弦图片播放的效果,并每张图片有各自的链接...

    HTML 网页页面切换的各种变换效果

    其中,n表示的就是下面的数,n取不同的值,对应有不同的效果: 0、Box in 1、Box out 2、Circle in 3、Circle out 4、Wipe up 5、Wipe down 6、Wipe right 7、Wipe left 8、Vertical blinds 9、Horizontal blinds 10...

    电子商务网页制作-项目八.pptx

    使用CSS的revealtrans滤镜可以制作出图片切换时的播放效果,它的书写格式是这样的:Filter:revealtrans(duration=转换的秒数,transition=转换的类型) 拓展练习: 1. 什么是脚本语言? 脚本语言包含以下几点含义:...

    css滤镜大全css滤镜大全

    CSS滤镜是现代Web设计中的一个重要工具,它能够让我们在不依赖图像处理软件的情况下直接在网页上对元素应用视觉效果。这不仅可以减少开发工作量,还能提高网站性能。CSS滤镜通过`filter`属性实现,该属性可以接受...

    Dreamweaver中CSS滤镜的功能和参数设置

    在Dreamweaver中,CSS滤镜是一种强大的工具,允许开发者为网页元素添加各种视觉效果,如透明度、模糊、阴影、翻转等。通过CSS滤镜,你可以增强网页的视觉吸引力,创造出各种独特的视觉体验。以下是一些主要的CSS滤镜...

    非常漂亮网页常用效果js

    通过`FILTER:revealTrans(Duration=4.0, Transition=23)`属性和`filters.item(0).play(2.0)`方法,可以控制图片的透明度变化和动画效果。 7. **自定义弹窗**:JavaScript可以创建自定义的弹窗,如设置弹窗的链接、...

    IE自带的网页过渡特效

    ### IE自带的网页过渡特效详解 ...综上所述,虽然IE自带的网页过渡特效在当时具有较高的实用价值,但在当前Web开发环境下,开发者更倾向于使用更为灵活、兼容性更好的CSS3动画或第三方JavaScript库来实现页面过渡效果。

Global site tag (gtag.js) - Google Analytics