• + 服务
  • + 案例
  • + 关于
  • + 联系
  • 玩转HTML5移动页面(动效篇)

    文章分类:设计前沿 发布时间:2015-06-29 原文作者:admin 阅读( )


    1.快速输出静态页面
    2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来
    作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢?

     

    这次就来谈谈一些动画设计的小技巧,能在你时间不多又没有动画想法的时候瞬间让页面增色不少。
    同时也会谈及移动端H5页面的优化细节与关键点,因此本文章将分为动效篇优化篇

     

    ====前方高能====

     

    (1)  CSS3时序错开渐显动画
    这是一种比较常用的动画,它的优点是节奏感强,做法就是先让每个元素隐藏,然后当页面呈现后每个元素错开时间出现。
    例子(忽略兼容前缀和无关属性):
    玩转HTML5移动页面(动效篇)
    玩转HTML5移动页面(动效篇)

    效果就是两个元素分别从上面掉下来,这里有个小细节(keyframes),为了让掉下来的动画生动点,应该是在90%的时候先掉下一点点,然后瞬间在100%时回跳5px。

    还有个细节,安卓2.3.*不能良好支持-webkit-animation-fill-mode,也就是渐变动画不能停止在最后一帧。有这样一个解决方案:

    1.用Modernizr去检测是否支持这个属性,加上识别类.no-animation-fill-mode;

    2.根据识别类采取以下措施:
    (1)用js模拟同样效果;
    (2)用css屏蔽掉动画;
    (3)或者直接全部都用transition来做(不要keyframes)。


    原文来自:鼎商网络
    下一篇:没有了 上一篇:没有了

    read more >>

  • 玩转HTML5移动页面(动效篇)...



  • 中华彩票网预测公众账号
    添加"鼎商"

    甘公网安备 62070202000443号