注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学会珍惜

You've been saying for the longest time

 
 
 

日志

 
 

浅析页面进入效果  

2012-03-31 11:54:47|  分类: 前端开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
转自:QPWOEIRU96博客

早期Web开发人员中都知道一些IE下的独特特性比如滤镜,页面进入退出效果。随着CSS3的到来,这些特性在其他浏览器下也可以得到实现。

首先我们讲一下IE中的进入退出页面效果:

  1. <meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
  2. <!-- 以上是表示进入页面的效果 -->
  3. <meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)"> 
  4. <!-- 以上是表示退出页面的效果 -->

其中duration中的x代表动画也就是特性的播放时间[注意是以秒为单位,而不是通常的毫秒。],transition表示使用哪种特效,取值为1-23,下面是这些动画的列表:

  1.   0 矩形缩小
  2.   1 矩形扩大
  3.   2 圆形缩小
  4.   3 圆形扩大
  5.   4 下到上刷新
  6.   5 上到下刷新
  7.   6 左到右刷新
  8.   7 右到左刷新
  9.   8 竖百叶窗
  10.   9 横百叶窗
  11.   10 错位横百叶窗
  12.   11 错位竖百叶窗
  13.   12 点扩散
  14.   13 左右到中间刷新
  15.   14 中间到左右刷新
  16.   15 中间到上下
  17.   16 上下到中间
  18.   17 右下到左上
  19.   18 右上到左下
  20.   19 左上到右下
  21.   20 左下到右上
  22.   21 横条
  23.   22 竖条
  24.   23 以上22种随机选择一种

那么如何在非IE浏览器下搞这样的进入过渡效果呢,答案是利用CSS3的动画效果。

首先我就不大费周章的介绍CSS3的动画效果了,列3篇文章在此:

CSS3 Transform

Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

 CSS3 Transition

CSS3的Transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。

 CSS3 Animation

CSS3的这三种属性都很相似,只是应用场景不同,其中Animation最为强大,因为看名字就知道了。

 那么最简单的Demo是怎样的呢,看代码:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>DEMO</title>
  6. <style type="text/css">
  7. html,body{
  8. -webkit-animation: fade-in 2.6s;
  9. -moz-animation: fade-in 2.6s;
  10. }
  11. @-webkit-keyframes fade-in{
  12. 0%{opacity:0;}
  13. 100%{opacity:1;}
  14. }
  15. @-moz-keyframes fade-in{
  16. 0%{opacity:0;}
  17. 100%{opacity:1;}
  18. }
  19. @-webkit-keyframes fade-out{
  20. 0%{opacity:1;}
  21. 100%{opacity:0;}
  22. }
  23. @-moz-keyframes fade-out{
  24. 0%{opacity:1;}
  25. 100%{opacity:0;}
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. 加点料在里面......
  31. </body>
  32. </html>

预览一下,你就会发现页面真的是淡出的。这样的效果用在展示页面无疑是最为有用的。事实上利用关键帧技术你还可以做出更为强大的动画效果,当然这就得看你的想象力跟编码能力啦。

注意:再页面庞大并且DOM节点繁杂的时候注意使用此效果,因为用户可没耐心等待加载完才能开始的效果元素,如果需要可以再页面展示个Loading。

抛砖引玉,欢迎探讨,我是菜鸟。

  评论这张
 
阅读(169)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018