被忽略的META标识之殊效(网页页面过渡实际效果

在web设计方案中应用js能够完成许多的网页页面殊效,但是许多人却忽略了HTML标识中META标识的强劲作用,实际上meta标识还可以完成许多好看的网页页面过渡实际效果。
META标识是HTML語言HEAD区的1个輔助性标识,Meta 标识放在每一个网页页面的<head>...</head>
正中间,大家大伙儿较为熟习的如:
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">//表明编写专用工具;
<meta name="KEYWORDS" content="...">//表明重要词;
<meta name="DESCRIPTION" content="...">//表明首页叙述;
它出示客户不能见的信息内容。meta标识一般用来为检索模块robots界定网页页面主题,或是界定客户访问器上的cookie;它能够用于辨别作者,设置网页页面文件格式,标明內容摘要和重要字;还能够设定网页页面使其能够
依据你界定的時间间距更新自身,和设定RASC內容级别,这些
本文关键论述怎样应用meta标识,造成网页页面过渡实际效果.....

用法:
<Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">
<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">

blendTrans是css动态性滤镜的1种,造成渐隐实际效果。另外一种动态性滤镜RevealTrans还可以用于网页页面进到与撤出实际效果:
动态性滤镜能够为网页页面加上迷人的淡入淡出、图像转换实际效果,它能够分成两种blend(混和)和reveal(显示信息),
前者可使目标逐渐消退或出現,后者出示了24种图像转换的实际效果......
<Meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)">
<Meta http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)">
Duration:表明滤镜殊效的不断時间(企业:秒)
Transition:滤镜种类。表明应用哪样殊效,赋值为0⑵3。
------------------------------------------------------------------------------
       0 :矩形框变小       1: 矩形框扩张     
       2: 圆形变小       3: 圆形扩张     
       4: 下到上更新      5: 上到下更新     
       6: 左到右更新      7: 右到左更新     
       8 :竖百叶窗帘       9 :横百叶窗帘        
       10 :移位横百叶窗帘     11: 移位竖百叶窗帘     
       12 :点外扩散       13: 上下到正中间更新     
       14 :正中间到上下更新    15 :正中间到左右      
       16 :左右到正中间      17 :右下到左上    
       18 :右上到左下      19 :左上到右下    
       20 :左下到右上     21 :横条      
       22 :竖条       23 :以上22种任意挑选1种
------------------------------------------------------------------------------
网页页面转换实际效果要是配搭恰当,这些转换实际效果会给访客留下十分刻骨铭心的印象,即便是那些原本对你的站点没兴趣爱好的访客。非常是喜爱学习培训网页页面制做的盆友,极可能就把 你的网页页面拷贝下来,以供学习培训科学研究之用。实际上你但是是加了短短1段编码罢了^_^ 网页页面转换实际效果(Trans)共分4大类:"进到网页页面"(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)">

如今让大家来剖析1下这些编码,最先大伙儿1定能看出这些编码大多数数地区很类似。客观事实上,尽管归类许多,但每一个大类下的25个小类是各自对应同样的,而且用 数据来标志,(除混和实际效果 blendTrans(Duration=1.0)),因此无需对没个大类11举例表明,要是把"Page-Enter"换为"Page-Exit"(离 开网页页面)、"Site-Enter"(进到站点)、"Site-Exit"(离去站点),便可以做到必须的实际效果了,另外记忆力起来也较为便捷。其 中"Duration=1.0"能够设置每一个周期的時间为多久,企业是秒(如今设定的是每周期1秒)。 必须留意的是4个大类的实际效果能够在1个网页页面里另外设定,但每一个大类只能设定1种实际效果。此外假如网页页面是帧页的话,也将没法显示信息出实际效果。