网站首页网站地图google地图百度地图学习库RSS在线PSPS联盟素材下载  PS视频教程专题 PS爱好者教程网www.psahz.com PS教程自学网QQ群

六大奇招带你玩转HTML5移动页面动效(2)

时间:2015-05-04 22:46 来源:教程资料 作者:移动页面动效 阅读:

(2) CSS3细节强调动画

一些局部细节如果还是渐现显示,会枯燥没什么感觉,例如标题、按钮等,需要一种强调。

分两种情况:

1.如果时间允许的话,基本做法是先把一个元素切成不同的块状,例如小人的手脚都切成不同图片,然后让它们重新组合,再通过赋予不同的CSS动画来让它生动起来,这里引用个webank的例子:

六大奇招带你玩转HTML5移动页面动效

(查看DEMO)

2.如果时间紧凑,又不像桑尼一样擅长于动画细节,可以使用一些辅助工具:

Animate.css,通过直接预览选择想要的动效,然后下载它的CSS把对应的keyframe扒下来就好了(引用整个CSS是资源浪费)。

(3)SVG动画

SVG技术越来越不陌生,使用门槛也渐渐降低,而且SVG动画还可以使用CSS控制。

先看个生日页面,是个SVG的蛋糕:

六大奇招带你玩转HTML5移动页面动效

(查看DEMO)

可见SVG是很强大的!弥补了CSS3的不足。

然而这种动画也是略耗时,但有一种比较常用的,就是线条的描绘动画,CSS3比较难实现,这里可以用SVG,看图:

六大奇招带你玩转HTML5移动页面动效

PS笔刷下载 PS滤镜下载 PS形状下载 PS样式下载 PS动作下载 PS图案下载
相关教程