第一门户首页

H5教程:移动创意与功能支持

更新时间:2015年12月14日 作者: 人气: 【字体: 收藏 打印文章

今年,想必大家都能充分体会到移动互联网的迅猛发展,无论在移动游戏,手机购物,各种o2o的新生活方式,都有了几乎翻天覆地的变革。 当各种大牌手机成为街机,当国内的手设备硬件和系统不断升级和改进,当手持设备对html5的支持越来越好,移动页面也就迎来了他的春天,更多的创意效果在移动设备上得到了支持,更多的创意页面出现在我们眼前。

上图展示的移动页面,有互动游戏,有常见的H5邀请函,这么多的移动页面中,技术实现有用JS+css3的,也有使用html5 CANVAS实现的,那么这些种种效果的背后具体的使用的具体技术是什么,这些技术在手机的支持情况怎样?今天我们就一起来探讨一下。

移动创意和功能支持

我们常见的动画效果一般由放大缩小,旋转,唯一,透明度变化加上一些缓动结合而成,这些效果以往在PC时代都要结合复杂的JS才能实现,但在手机里面,我们可以更好应用css3的优势,只需要通过简单的css3代码即可实现。举个栗子:

在这个例子中,首先需要将风车从PSD里分离,然后定义好一段css3旋转的动画:
@-webkit-keyframes windmill{100%{-webkit-transform:rotate(360deg)}}

最后给风车翼加上动画即可。(重构工程师真是伟大的工程师,熟悉各种工程学,啧啧啧)

上一篇:H5 深度玩法总结,让你的 H5 获得病毒扩散效益下一篇:没有了

资讯中心 案例中心 素材中心 iebook下载 电子杂志下载 电子杂志在线阅读 手机电子杂志 iebook教程

Copyright©2003-2013 01w.com All Rights Reserved 版权所有 飞天集团/第一门户 粤增值电信业务经营许可证:粤B2-20090168 备案号:粤ICP备09014417号

法律顾问:广信律师事务所 刘东栓律师;律师执业证号:14401199910499379

iebook在线客服