html 页面过度效果,HTML页面过渡效果大全
试了下没效果。。先存着。
-------------------------------------------------------------------------------------------------------------------------------
大家经常在网站上看到一些很不错的特效,其实马上想到的就是 Javascript 或是 Flash ...没错...但通过写 Javascript 来获得特效并非易事,设计 Flash 何尝也不是这样...其实大家要好好利用下 HTML 本身有的页面效果...接下来就来看看吧..(~ o ~)~zZ
怎么做呢,其实很简单,就利用文本头的 标记中,具体 meta 标记作用这里就不介绍,这里重点说明它如何实现页面过渡效果...
IE要求: 在IE5.5及以上版本的浏览器中. 启用网页过渡效果 默认情况下都已经启用了,如果需要手动启用则只需在Internet选项中: Advanced(高级) - Browsing(浏览) - Enable page transitions(启用页面过渡)即可。 应用过渡效果 当我们需要添加过渡效果时,只需在
中添加一个特殊的即可,比如:
一.先介绍下参数:
http-equiv 作用很多,这里的值为 Page-Enter 是指在页面进入的时候发生,其他值还有:
Page-Enter : 进入页面
Page-Exit : 离开页面
Site-Enter : 进入网站
Site-Exit : 离开网站
content当然就是内容咯,这里表示页面过渡的效果设置,这里的两个属性表示分别表示 Duration : 过渡速度 Transition : 可选项。整数值(Integer)。设置或检索转换所使用的方式
具体数值介绍:
0 : 矩形收缩转换。
1 : 矩形扩张转换。
2 : 圆形收缩转换。
3 : 圆形扩张转换。
4 : 向上擦除。
5 : 向下擦除。
6 : 向右擦除。
7 : 向左擦除。
8 : 纵向百叶窗转换。
9 : 横向百叶窗转换。
10 : 国际象棋棋盘横向转换。
11 : 国际象棋棋盘纵向转换。
12 : 随机杂点干扰转换。
13 : 左右关门效果转换。
14 : 左右开门效果转换。
15 : 上下关门效果转换。
16 : 上下开门效果转换。
17 : 从右上角到左下角的锯齿边覆盖效果转换。
18 : 从右下角到左上角的锯齿边覆盖效果转换。
19 : 从左上角到右下角的锯齿边覆盖效果转换。
20 : 从左下角到右上角的锯齿边覆盖效果转换。
21 : 随机横线条转换。
22 : 随机竖线条转换。
23 : 随机使用上面可能的值转换。
二.下面介绍具体的例子啦:
混合 (淡入淡出)
盒状收缩
/>
盒状展开
/>
圆形收缩
/>
圆形放射
/>
向上擦除
/>
向下擦除
/>
向右擦除
/>
向左擦除
/>
垂直遮蔽
/>
水平遮蔽
/>
横向棋盘式
纵向棋盘式
随机溶解
左右向中央缩进
中央向左右扩展
/>
上下向中央缩进
中央向上下扩展
从左下抽出
从左上抽出
/>
从右下抽出
/>
从右上抽出
随机水平线条
随机垂直线条
随机
三.其他过渡效果:
Blinds(百叶窗)
/>
属性
: bands (default=10), Direction (default="down"), Duration ( no default)
Barn(扫除)
/>
属性
: duration, motion, orientation (default="vertical")
CheckerBoard(无数小格)
/>
/>
属性: Direction (default="right"), squaresX (default=12), squaresY (default=10)
Fade(淡入淡出)
/>
属性: duration, overlap (default=1.0)
GradientWipe(渐变扫除)
/>
/>
属性: duration, gradientSize (default=0.25), motion
Inset(从一角扩散)
/>
属性: duration
Iris(十字扩散)
属性: duration, irisStyle (default="PLUS"), motion
Pixelate(震动出来)
属性: duration, maxSquare (default=25)
RadialWipe(螺旋扩展)
属性: duration, wipeStyle (default="CLOCK")
RandomBars(线条遮罩)
属性
: duration, orientation (default="horizontal")
RandomDissolve(像素遮罩)
属性: duration
Slide(拉幕)
/>
属性
: bands (default=1), duration, slideStyle (default="SLIDE")
Spiral(向心旋转)
属性: duration, gridSizeX (default=16), gridSizeY (default=16)
Stretch(两边开幕效果)
/>
属性
: duration, stretchStyle (default="SPIN")
Strips(一角锯齿开幕)
/>
属性: duration, motion
Wheel(十字旋转开幕)
属性
: duration, spokes (default=4)
ZigZag(Z字形展开)
/>
属性
: duration, gridSizeX, gridSizeY
html 页面过度效果,HTML页面过渡效果大全相关推荐
- html 页面下雪效果,HTML页面下雪特效
1. [代码][HTML]代码 下雪 2. [代码][JavaScript]代码 (function(){ if(window.zythumsgooglesnowloaded) return fals ...
- html控制两个页面转换,html页面切换过度效果实现方案_蓝戒的博客
html页面切换过度效果实现方法很简单,但是对于浏览器的设置有需求,经过测试IE浏览器的默认设置没有问题,但是其他浏览器需要进行设置才可以. 实现方法就是:利用文本头的 标记实现页面过渡效果,具体说明 ...
- js html页面切换效果,jQuery实现切换页面过渡动画效果
这篇文章主要介绍了关于jQuery实现切换页面过渡动画效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效 ...
- html页面控制标签,html常用标签大全
字体标签,用于展示效果中修饰文字样式 文字 size:控制字体大小.最小1 ~ 最大7. 如果设置范围不在1~7之间,设置无效 color:控制字体颜色. 使用英文设置(例如:red,blue-) f ...
- html右侧浮动栏随着滚动,jQuery实现div浮动层跟随页面滚动效果
jQuery实现浮动层跟随页面滚动效果 #main{height:2000px} .demo{width:180px; height:250px; margin:10px; border:2px so ...
- 根据后台的数据设置前端页面展示效果
2019独角兽企业重金招聘Python工程师标准>>> eg1:后台数据:0:女,1:男: 前端展示效果为:男或女,而不是显示0或1 eg2:后台数据:1:模组1, 2:模组2 ...
- 百度搜索效果(页面传来数据地址,由服务器去获取)
百度搜索效果(页面传来数据地址,由服务器去获取): <!DOCTYPE html> <html><head><meta charset="UTF-8 ...
- Xamarin.FormsShell基础教程(4)Shell项目内容列表页面运行效果
Xamarin.FormsShell基础教程(4)Shell项目内容列表页面运行效果 在创建好Shell解决方案后,就可以运行程序了.本小节将讲解运行后的效果. 内容列表页面 运行程序,初始效果如图1 ...
- 代码: html 页面小效果 (集合,待补充)
代码: html 页面小效果 (集合,待补充) 标签切换(下部内容区跟着切换): 2016-6-2 <script type="text/javascript" src=&q ...
最新文章
- 具体分析Struts工作流程
- 三元组顺序表表示的稀疏矩阵加法_数据结构实验题(三元组顺序表表示的稀疏矩阵转置运算)...
- 在Windows下编译WebRTC
- 中级软考 计算机指令执行过程(取指、分析、执行)计算机重叠流水线问题
- 国内常用的学习flutter地址
- Material Designer的低版本兼容实现(一)—— 简介 目录
- win7乱码 字符集解决方案
- 每日一笑 | 床上还是桌上,你总得选一样~
- VS Code 常用快捷键
- 麦克风的喧响伪原创工具
- 还有 2 天,这场大咖云集的启智开发者大会即将启动!
- Bloomberg监控系统的标准化和扩展
- Linux/Unix IO多路复用之select网络编程(含源码)
- 颜色 透明度 算法_通过问责制和透明度减少算法偏差
- linux终端怎么设置monaco,Ubuntu中使用Monaco字体美化
- SecureCRT免费安装教程
- 如何找回mysql删除的表_mysql误删表如何恢复,恢复被删除表的步骤说明
- GUI编程—欢迎来到PyQtGraph-中文版(中)!
- 二叉树如何求两个叶节点的最近公共祖先--re
- 总结一下《17天搞定GRE单词》的方法