轻松玩HTML5移动网页页面(动画特效篇)

此次就来谈一谈一些动漫设计方案的小窍门,能在你時间很少又沒有动漫念头的情况下一瞬间让网页页面提色很多。 同时也商谈及手机端H5网页页面的提升关键点与重要点,因而文中章将分成动画特效篇和提升篇。  

====正前方较高能====  

(1)  CSS3时钟频率错开渐显动漫 它是一种较为常见的动漫,它的优势是节奏感感强,作法便是先让每一个原素掩藏,随后当网页页面展现后每一个原素错开時间出現。 事例(忽视适配作为前缀和不相干特性): 玩转HTML5移动页面(动效篇) 玩转HTML5移动页面(动效篇) 实际效果便是2个原素各自从上边往下掉,这儿有一个小关键点(keyframes),以便让往下掉的动漫栩栩如生点,应当是在90%的情况下先掉下一点点,随后一瞬间在100%时回跳5px。

也有个关键点,安卓系统2.3.*不可以优良适用-webkit-animation-fill-mode,也便是渐变色动漫不可以终止在最终一帧。有那样一个处理计划方案:

1.用Modernizr去检验是不是适用这一特性,再加鉴别类.no-animation-fill-mode;

2.依据鉴别类采用下列对策:
(1)用js仿真模拟一样实际效果;
(2)用css屏蔽掉掉动漫;
(3)或是立即所有都用transition来做(不必keyframes)。