被忽视的META标签之特效
在web设计中使用js可以实现很多的页面特效，然而很多人却忽视了HTML标签中META标签的强大功效，其实meta标签也可以实现很多漂亮的页面过渡效果。
META标签是HTML语言HEAD区的一个辅助性标签，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动态滤镜的一种，产生渐隐效果。另一种动态滤镜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-23。 ------------------------------------------------------------------------------
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种随机选择一种
------------------------------------------------------------------------------ 网页变换效果只要搭配得当，这些变换效果会给访客留下非常深刻的印象，即使是那些本来对你的站点没兴趣的访客。特别是喜欢学习网页制作的朋友，很可能就把 你的网页复制下来，以供学习研究之用。其实你不过是加了短短一段代码而已^_^ 网页变换效果（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)">
现在让我们来分析一下这些代码，首先大家一定能看出这些代码大多数地方很相似。事实上，虽然分类很多，但每个大类下的25个小类是分别对应相同的，并且用 数字来标识，（除了混合效果 blendTrans(Duration=1.0)），所以不用对没个大类一一举例说明，只要把"Page-Enter"换为"Page-Exit"（离 开网页）、"Site-Enter"（进入站点）、"Site-Exit"（离开站点），就可以达到需要的效果了，同时记忆起来也比较方便。其 中"Duration=1.0"可以设定每个周期的时间为多久，单位是秒（现在设置的是每周期1秒）。 需要注意的是四个大类的效果可以在一个网页里同时设置，但每个大类只能设置一种效果。另外如果网页是帧页的话，也将无法显示出效果。
被忽视的META标签之特效的更多相关文章
- 被忽视的META标签之特效(页面过渡效果)
在web设计中使用js可以实现很多的页面特效,然而很多人却忽视了HTML标签中META标签的强大功效,其实meta标签也可以实现很多漂亮的页面过渡效果. META标签是HTML语言HEAD区的一个辅助 ...
- Meta标签详解(HTML JAVASCRIPT)
Meta标签详解,在网上转的,希望对大家有用 您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广 个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中 ...
- 网页设计：Meta标签详解
很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅 ...
- meta标签详解(meta标签的作用)///////////////////////////转
meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧 ...
- Meta标签详解（转）
引言 您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中登录自己的个人网站 ● 在知名网站加入你个 ...
- 详解meta标签
Meta标签详解,在网上转的,希望对大家有用 引言 您的个人网站即使做得再精彩,在"浩瀚如海"的网络空间中,也如一叶扁舟不易为人发现,如何推广个人网站,人们首先想到的方法无外乎以下 ...
- Meta标签详解
[转载]Meta标签详解 Posted on 2005-05-17 20:00 二十四画生 阅读(54195) 评论(102) 编辑 收藏 Meta标签详解,在网上转的,希望对大家有用 引言 您的个 ...
- 一个由SEO优化展开的meta标签大讲解
您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中登录自己的个人网站 ● 在知名网站加入你个人网站 ...
- 基础复习之HTML （meta标签、块级元素与行内元素）
一.meta标签 SEO 如何在不使用JS的情况下刷新页面(http-equiv="refresh" , content="time") 设置页面缓存 移动端设 ...
随机推荐
- 利用Tomcat的用户名和密码构建“永久”后门
从本案例中可以学到: (1)关于JSP的一些基础知识 (2)利用Tomcat的用户名和密码来构建后门 本文首先要感谢<黑客手册>“非安全.后生”编辑为本为提供了帮助,还要感谢网友“伤心的鱼 ...
- 界面控件 - 滚动条ScrollBar（对滚动条消息和鼠标消息结合讲的不错）
界面是人机交互的门户,对产品至关重要.在界面开发中只有想不到没有做不到的,有好的想法,当然要尝试着做出来.对滚动条的扩展,现在有很多类是的例子. VS2015的代码编辑是非常强大的,其中有一个功能可以 ...
- Visual Studio 2015编译安装配置QT5.5.1(含QTWEBKIT)
尽管QT5.5.1和VisualStudio 2015都已经发布很久了,但是QT项目组视乎不会为QT5.5.1专门发布预编译的QT5.5.1 for windows(2015)版本的,也不会专门发布V ...
- Hadoop: the definitive guide 第三版 拾遗 第十章 之Pig
概述: Pig的安装很简单,注意一下几点: 1.设置系统环境变量: export PIG_HOME=.../pig-x.y.z export PATH=$PATH:$PIG_HOME/bin 设置完成 ...
- 我对国内两大购书站点的感受(dearbook和china-pub)
我在china-pub和dearbook都是老用户了(china-pub五星,dearbook钻石VIP).说一下近来我对两个站点的感觉. 1. Dearbook和当当合作以后送货速度比china-p ...
- Widget小组件
一.使用步骤: 1.建立Widget的样式布局文件widght,布局只支持几种,比如,相对布局,线性布局,帧布局,布局里支持的控件也是有限的. 2.在res下建立一个新的文件夹我的命名为xml 3.在 ...
- android的animator
3.0 以前,android支持两种动画模式,tween animation,frame animation,在android3.0中又引入了一个新的动画系统:property animation,这 ...
- SICP练习1.6-1.8
1.6 死循环 1.7 #lang racket (define (square x) (* x x)) (define (sqrt-iter guess x) (if (good-enough? g ...
- ZOJ 3609 求逆元
Modular Inverse Time Limit: 2 Seconds Memory Limit: 65536 KB The modular modular multiplicative ...
- 几种能在O(n*log(n))时间排序
线性时间排序 各种排序算法总结已经介绍了几种能在O(n*log(n))时间内培训n个数的算法.归并排序和堆排序达到了最坏情况下的上界:快速排序在平均情况下达到该上界.这些算法都有一个有趣的性质:在 ...