用Dreamweaver制作网页中常用的过渡效果
制作步骤:
1、 打开一个页面,这一步非常关键。为什么要打开一个页面,而不是在编辑过程中进行设置呢?这是因为网页过渡的代码必须在代码窗口的一些特定区域显示才能起作用。而刚打开的窗口,光标在代码窗口的最上一行的最前边,是合适的位置之一,对于不熟悉代码者来说,这样简单、易操作。但有些网页刚打开时光标也不在代码窗口的最上一行的最前边,那要通过边框的滚动条找到代码的第一行,然后在最前边点击鼠标,把光标定位在代码窗口的最上一行的最前边。
2、单击菜单栏中的插入-HTML-文件头标签-Meta,会弹出Meta对话框。
3、在对话框中的属性选项的下拉列表中选HTTP-equivalent选项,在值一格中键入Page-Enter,表示进入网页时有网页过渡效果。 在内容一格中键入 Revealtrans(Duration=4,Transition=2),Duration=4 表示网页过渡效果的延续时间为4秒,Transition表示过渡效果方式,值为2时表示圆形收缩,各种效果数字代码如下。
4、输入完后单击确定,保存。这样当我们进入这个页面时就可以看到效果了。刚才你看到效果了吧!要不然你再回到主页,再到这一页看一下。
5、另外还有二十多种效果供你选择,只要将Transition的值改为相应的效果的代号即可,具体效果和设置如下表所示 :
效果 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
相关文章
- 本文主要介绍了菜单栏 “三” 变形为“X”css3过渡动画的实现方法。具有很好的参考价值,下面跟着小编一起来看下吧2017-02-28
- 本篇文章主要介绍了Css3新特性应用之过渡与动画,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-01-10
- 大家都知道过渡动画是动画的基础,在学习动画属性之前,我们需要先了解过渡属性transition,下面这篇文章通过示例代码给大家详细介绍了CSS3中的元素过渡属性transition,有2016-11-30
- 下面小编就为大家带来一篇浅谈CSS过渡、动画和变换。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦2016-07-21
- 下面小编就为大家带来一篇css过渡+3D效果的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-07-14
- 这篇文章主要为大家详细介绍了CSS3过渡transition效果实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-05-03
- 这篇文章主要为大家详细介绍了css3过渡的相关资料,用CSS3做一些过渡效果和动画,特别适合Web前端开发员学习,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-07-11
最新评论