网页转换时的过渡效果

转载 2007年09月24日 11:03:00
当我们点击网页上的链接时,浏览器页面就会转到链接指向的新的页面,我们想在页面转换时加上过渡效果。
打开这个页面的原代码,在<head>与</head>插入代码:
<meta http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=5)">
这样这个过渡效果就完成了,很简单吧。现在我们来测试一下效果如何,打开这个页面,然后点击页面上的链接,页面在转到下一个页面的过程中,我们看到页面是从上到下慢慢的转换到第二个页面的。
我们现在再试一个效果,将那段代码换成:
<meta http-equiv="Page-Exit" content="revealTrans(Duration=1,Transition=14)">
我们看到页面是从中间向左右两端展开过渡的,而且速度上快了一点。原因在于Duration和Transition的值不同。
Duration的值为网页动态过渡的时间,单位为秒。
Transition是过渡方式,它的值为0到23,分别对应24种过渡方式。如下表:
0 盒状收缩    1 盒状放射
2 圆形收缩    3 圆形放射
4 由下往上    5 由上往下
6 从左至右    7 从右至左
8 垂直百叶窗    9 水平百叶窗
10 水平格状百叶窗    11垂直格状百叶窗
12 随意溶解    13从左右两端向中间展开
14从中间向左右两端展开    15从上下两端向中间展开
16从中间向上下两端展开    17 从右上角向左下角展开
18 从右下角向左上角展开    19 从左上角向右下角展开
20 从左下角向右上角展开    21 水平线状展开
22 垂直线状展开    23 随机产生一种过渡方式
当Transition为23时,会随机产生0到22中的一个过渡效果。例如:
<meta http-equiv="Page-Exit" content="revealTrans(Duration=2,Transition=23)">
除了上面两个参数,还有一个http-equiv:
http-equiv="Page-Exit"的意思是指页面离开时产生效果。
它有一种写法,如:
http-equiv="Page-Enter"则是指页面进入时产生的效果 

activity跳转的过渡效果,很漂亮,很全

注意,切换方法overridePendingTransition只能在startActivity和finish方法之后调用。 第一个参数为第一个Activity离开时的动画,第二参数为所进入的A...
  • u014702999
  • u014702999
  • 2014年12月26日 16:53
  • 1157

css3实现网页平滑过渡效果

截图 思路: 1、导航利用来判断点击的元素 通过input:checked+a{}来为当前的元素添加样式 2、顶部的三角,利用正方形div,旋转45度,再隐藏部分 3、顶部的icon,下...
  • wangjiaohome
  • wangjiaohome
  • 2015年07月09日 13:54
  • 2136

Loading效果实现:加载新页面前的等待过渡画面

2017年11月25日 由于最近在写一个web项目,由于前端框架开发,和后台查数据的语法不成熟导致页面加载速度过慢,遂想到用loading效果来过渡: 粗略的查阅了下网上的实现方法...
  • qq576777915
  • qq576777915
  • 2017年12月02日 10:29
  • 99

H5之13__CSS过渡、动画和变换

一.  简介 在触摸设备上, 动画是用户手势的反馈. 在所有浏览器中,JS  是单线程执行的.    如果有异步任务, 比如 setTimeOut() ,会加入到执行队列,然后在线程变得空闲时执行。 ...
  • aduovip
  • aduovip
  • 2017年01月01日 15:46
  • 838

两个activity之间透明过渡效果和经验

来看下效果图: 大致效果解释: 1. 当用户点击登录时logo下滑一定距离 2. 下滑后旋转90时 变化图标 3. 继续旋转90度 4. 然后移动到左上角 透明度渐变到...
  • qfanmingyiq
  • qfanmingyiq
  • 2016年11月24日 13:32
  • 865

html5 学习--平滑过渡

语法:transition:[||||||[,||||||]]* 用法:transition: ,...(如果有更多用逗号隔开) Title ...
  • W3Chhhhhh
  • W3Chhhhhh
  • 2016年10月08日 11:07
  • 326

CSS的过渡效果及动画效果:transition&animation

最近做了一个全屏分页滚动效果的页面,其中运用到一些关于动画的元素。其实之前对于 .transition 、 .animation 、 .transform 就总是有点混淆,也花过一段时间来研究他们之间...
  • Seven521m
  • Seven521m
  • 2015年09月22日 14:11
  • 1771

自定义iOS的过渡动画的效果

过渡动画效果 CATranistion UIView的静态方法
  • dfman1978
  • dfman1978
  • 2016年09月06日 15:32
  • 966

CSS3特效之转化(transform)和过渡(transition)

在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition)。有人可能会有疑问,CSS3动画不是只有animation一个属性吗?怎么又和转化(tr...
  • bingkingboy
  • bingkingboy
  • 2016年04月17日 20:31
  • 6888

CSS3实现过渡效果 (transition)

CSS3中新增的transform属性,可以实现元素在变换过程中的过渡效果,实现了基本的 动画。...
  • actorWen
  • actorWen
  • 2017年12月14日 10:09
  • 159
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页转换时的过渡效果
举报原因:
原因补充:

(最多只允许输入30个字)