-
今天在一个博客里看到做的页面幻灯片一样的过渡效果,感觉不错;以前也在一个博友的博客中看到过那样的效果,就是不知道怎么来的,还以为是什么插件之类的,通过找资料了解了一下,原来就一句代码。今天把它摘录下来收藏,同时也提供给有需要的朋友。
陈德馨今天尝试了下效果,只是在源代码中加入了两句:
1、溶解过渡代码
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=12)">
2、竖条状翻转过渡代码
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=8)">
具体操作方法:
在<head>与</head>之间加入如下语句:
<meta http-equiv=Page-Enter content=revealTrans(Duration=3,Transition=3)>
这是meta的页面过渡效果,并且有两种,一种为载入效果,即打开页面的时候的效果;另一种为退出效果,就是离开这个页面的效果。
载入效果:
<meta http-equiv=Page-Enter content=revealTrans(Duration=3,Transition=3)>
退出效果:
<meta http-equiv=Page-Exist content=revealTrans(Duration=3,Transition=23)>
其中,duration为页面切换的时间长度,3.000表示3秒钟,一般可以直接输入3便可,数字越大切换的时间越长。Transition为切换类型,总共有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:
以上某种随机效果。自己可以慢慢试选择出符合你页面风格的特效来。
今天在此分享,希望对有需要的朋友有一定的帮助!当然任何事物其实都有一定的两面性,有朋友反映加了这样的代码之后,网页之间跳转的速度好像有点慢;个人感觉速度和以前基本上差不多。
附:相关效果代码供参考
<meta http-equiv="Page-Enter" content="blendTrans(Duration=4.0)">
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=0)">
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=1)">
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=2)">
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=3)">
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=4)">
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=5)">
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=6)">
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=7)">
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=8)">
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=9)">
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=10)">
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=11)">
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=12)">
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=13)">
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=14)">
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=15)">
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=16)">
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=17)">
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=18)">
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=19)">
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=20)">
Z-blog博客每个页面有切换特效的实现方法
2138人参与 |分类: 站长百科|时间: 2014年10月16日
相关文章
- 2020-04-15zblog免登录购买插件 zblog免登陆支付插件
- 2019-11-27Z-Blog用户中心(百搭)插件登录过后无法退出问题解决
- 2019-11-22Z-BlogPHP好运锦鲤主题操作教程
- 2019-11-11卢松松博客模板zblogphp版全新升级了
- 2019-11-06Z-Blog利用ue编辑器实现独立图片上传组件(免后端开发)
- 2019-08-16Z-Blog PHP的用户组分别是什么?权限有哪些?
- 2019-08-10Z-Blog验证码改为纯数字的方法
- 2019-05-06Z-Blog使用腾讯云CDN并且开启Https的配置教程
- 2019-03-05Z-BlogPHP删除分类后导致分类ID不连续的解决方法
- 2019-02-21Z-Blog PHP判断用户是否登录和级别区分的方法