网页淡入淡出效果实践

最新推荐文章于 2021-06-08 22:34:11 发布

iteye_130

最新推荐文章于 2021-06-08 22:34:11 发布

阅读量294

点赞数

分类专栏：网站前端开发文章标签： HTML

网站前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天看到有个网站采用了淡入淡出效果，感觉挺酷的，所以就自己也做了一个小DEMO,下面是源代码。
page1.html:



<html>
<head>
<title>网页淡入淡出效果演示</title>
<meta http-equiv="Page-Exit"; content="blendTrans(Duration=1.0)">
<!--

上面那个是淡入淡出，其他切换效果可以用以下语句，改变Transition的值会有24种不同的效果，从0开始，Duration规定了切换的速度
<Meta content=revealTrans(Transition=15,Duration=1) http-equiv=Page-enter >

-->
</head>

<body>
<h1>网页一</h1>
<hr/>

<a href="page2.html">跳转到网页二</a>
<br/>
<image src="http://www.baidu.com/img/baidu_logo.gif" />
<pre>
网页淡入淡出效果演示网页淡入淡出效果演示网页淡入淡出效果演示网页淡入淡出效果演示
网页淡入淡出效果演示网页淡入淡出效果演示网页淡入淡出效果演示网页淡入淡出效果演示
网页淡入淡出效果演示网页淡入淡出效果演示网页淡入淡出效果演示网页淡入淡出效果演示
网页淡入淡出效果演示网页淡入淡出效果演示网页淡入淡出效果演示网页淡入淡出效果演示
网页淡入淡出效果演示网页淡入淡出效果演示网页淡入淡出效果演示网页淡入淡出效果演示
</pre>

</body>
</html>

page2.html



<html>
<head>
<title>网页淡入淡出效果演示</title>
<meta http-equiv="Page-Exit"; content="blendTrans(Duration=1.0)">
<!--

上面那个是淡入淡出，其他切换效果可以用以下语句，改变Transition的值会有24种不同的效果，从0开始，Duration规定了切换的速度
<Meta content=revealTrans(Transition=15,Duration=1) http-equiv=Page-enter >

-->
</head>

<body>
<h1>网页二</h1>
<hr/>

<a href="page1.html">跳转到网页一</a>
<br/>
<image src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
<pre>
跳转到网页一跳转到网页一跳转到网页一跳转到网页一跳转到网页一跳转到网页一
跳转到网页一跳转到网页一跳转到网页一跳转到网页一跳转到网页一跳转到网页一
跳转到网页一跳转到网页一跳转到网页一跳转到网页一跳转到网页一跳转到网页一
跳转到网页一跳转到网页一跳转到网页一跳转到网页一跳转到网页一跳转到网页一
</pre>
</body>
</html>