ThinkMake 2016-07-18
这两天做了一个“砸金蛋”的效果
http://git.oschina.net/hbiao68/bomb_egg
从点击选择砸的蛋,到锤子砸蛋,到蛋碎裂,最后从蛋中显示代金券一系列动作自动完成。
问题:
在PC浏览器、android 和 iphone手机浏览器中显示全部正常,但是将其运行到app的webview控件中显示,却没有“锤子砸”的效果?
问题分析:
锤子砸的效果是使用的CSS3,transform:rotate(-5deg);
因为认为移动端的浏览器支持CSS3的效果已经很好了,所以就没有使用-webkit-transform
由于app中的webview还是与PC和手机浏览器中的内核有一定的差异(例如为了兼容更早期版本的浏览器,舍弃了一些高级更消耗资源的动画效果),导致对相同的代码,在浏览器中显示OK,却在webveiw中显示不正常
<div class="absolute width_33" style="top:-7%;right: 7%;-webkit-transform:rotate(-5deg);transform:rotate(-5deg);" id="hammerContainer">