codecamp

No.2 三维效果(CSS3 3D)

H5的华丽效果离不开一种叫CSS的技术,形象的说,如果把HTML5比作漫画的素描稿,CSS就是上色用的,相当于word界面上方的格式工具栏,如果没有CSS我们看到的H5网页就只能以“素颜”见人了。如果你熟悉互联网技术的命名规则你应该能知道CSS3就是CSS的升级版本。

在CSS3中有个非常酷的功能是三维渲染,也就说H5中能做出3D动画甚至3D游戏。目前我们看到的H5中CSS3 3D的应用较少,这个也许会是下一个营销类H5应用的热点,建议大家持续关注。

下面这两个网页游戏就是用H5+CSS3 3D做的,第一个是俄罗斯方块的3D版,想象一下在三维的空间里玩俄罗斯方块是什么感觉,喜欢挑战空间想象力的朋友可以试一下;第二个游戏是3D版坦克大战,非常精致耐玩的游戏,一句话评价就是“根本停不下来”。


PS:以上提到这些网站都需要在PC浏览器中打开,虽然麻烦一些,但绝对是值得的。


No.1 绘图功能(Canvas、SVG)
No.3 离线存储(HTML5 Web Storage)
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }