h5 动画页面
有个细节,安卓2.3.*不能良好支持-webkit-animation-fill-mode,也就是渐变动画不能停止在最后一帧。有这样一个解决方案:
1.用Modernizr去检测是否支持这个属性,加上识别类.no-animation-fill-mode;
2.根据识别类采取以下措施:
(1)用js模拟同样效果;
(2)用css屏蔽掉动画;
(3)或者直接全部都用transition来做(不要keyframes)。
Android手机的屏幕碎片化非常严重,各种各样的分辨率非常之多,那么如何让游戏可以适配这些机型就显得尤为重要。这里也是前前后实验了多种方案。先想到用JS来动态的根据分辨率来设置相关元素的大小,但要么在某些机型中获取失败,要么用赋值缩放相关元素时造成游戏崩溃……用 absolute 来解决:
关键代码:
1 |
.game { |
以上代码使游戏容器绝对定位之后,上下左右四边都与手机屏幕贴紧,从而做到了适配各种屏幕。
然后使用 background-size:cover; 让背景覆盖全屏,此代码可以使背景 自动缩放 至 覆盖 容器大小。
为了适应各种屏幕,应该使用动态居中的布局,而不是传统页面的左上角为基准:
.welcome { position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -111px; background-image: url("img/wel.png"); width: 222px; height: 200px; }
希望每次浏览这一屏内容的时候,动画都走一遍,可以使用reflow重新触发一下animation
:
container.classList.remove("active"); container.offsetWidth = container.offsetWidth; container.classList.add("active");
animation-timing-function:steps(4, start);
第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。
每一帧变化会自动计算取平均值。
原理还是在不断的移动背景图片,但每种背景会保留一段时间,通过他我们可以方便的制作帧动画
h5 动画页面的更多相关文章
- H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
- 快速构建H5单页面切换骨架
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
- 快速构建H5单页面切换应用
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
- 利用简洁的图片预加载组件提升h5移动页面的用户体验
在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...
- H5动画优化之路
H5动画60fps之路 在移动端,和Native相比,H5一直都被人吐槽性能差,尤其是在动画方面. 谈到整个Web app的生命周期,一般分为四个部分: 加载 等待用户 响应用户 动画 一般情况下,首 ...
- 运用预加载提升H5移动页面的用户体验
原文地址:http://www.grycheng.com/?p=2188 在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用 ...
- H5 App页面 绝对定位 软键盘弹出时顶起底部按钮
做H5 App页面时,有时候,按钮可能会放到页面的最底下,这个时候可能会用到绝对定位(position: absolute),但是,当input 输入框被点击时,弹出的软键盘会顶起底部的按钮,就像这样 ...
- h5微信页面在手机微信端和微信web开发者工具中都能正常显示,但是在pc端微信浏览器上打不开(显示空白)
h5微信页面在手机微信和微信开发者工具中都能正常显示,但是在pc端微信浏览器上打不开或者数据加载不出来. 原因:pc端微信浏览器不支持ES6语法,我的代码中使用了一些ES6的特性 解决:将ES6转换为 ...
- h5动画如何实现?如何快速开发h5动画
最近几年随着h5的兴起,复杂的h5动画,甚至是交互动画类型的产品不断涌现,尤其在课件产品方面,很多公司都有相关需求,最近很多h5开发工程师想了解相关方面的技术. 针对h5,如果是简单的动画效果,可以考 ...
随机推荐
- URL编码解决
与其他系统对接时遇到的问题URL中传递认证码,URL默认只允许传递ASCII码中的数据,所以浏览器默认会进行一次编码将%等特殊符号转义后台web服务器收到URL中的参数,会默认进行一次解码,但遇到的问 ...
- TCP/IP(八)之总结ICP/IP四层模型
前言 在这里有一个问题,有的书上说TCP/IP是四层有的却说是五层.其实这个问题我也上网查了一下资料. tcp/ip是事实标准,分4层.osi模型是国际标准,分7层.讲课的时候,一般把他们综合起来讲, ...
- windows下创建Python虚拟环境
windows下创建Python虚拟环境 说明 由于Python的版本众多,还有Python2和Python3的争论,因此有些软件包或第三方库就容易出现版本不兼容的问题. 通过 virtualenv ...
- 【原创】流程引擎的网关(遵循BPMN2.0)设计总结
概述 BPMN 2.0是什么呢?业务流程模型注解(Business Process Modeling Notation - BPMN)是 业务流程模型的一种标准图形注解.这个标准 是由对象管理组(Ob ...
- ssi服务器端指令详解(shtml)
你是否曾经或正在为如何能够在最短的时间内完成对一个包含上千个页面的网站的修改而苦恼?那么可以看一下本文的介绍,或许能够对你有所帮助. 什么是SSI? SSI是英文Server Side Include ...
- dotweb框架之旅 [二] - 常用对象-App(dotweb)
dotweb属于一个Web框架,希望通过框架行为,帮助开发人员快速构建Web应用,提升开发效率,减少不必要的代码臃肿. dotweb包含以下几个常用对象: App(dotweb) App容器,为Web ...
- win10应用 UWP 使用MD5算法
windows有自带的算法来计算MD5 原本在WPF是 private string get_MD5(string str) { System.Security.Cryptography.MD5Cry ...
- Python和SQL 2017的强大功能
Python和SQL Server 2017的强大功能 原文来自:https://www.red-gate.com/simple-talk/sql/sql-development/power-py ...
- Learning Scrapy 中文版翻译 第一章
第一章:scrapy介绍 欢迎来到scrapy之旅.通过这本书,我们将帮助你从只会一点或者零基础的Scrapy初学者达到熟练使用这个强大的框架在互联网或者其他资源抓取海量的数据.在这一章节,我们将给你 ...
- 3des用法示例,已测试
using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security ...