HTML/CSS html 上如何制作类似 app 上的启动说明页

xiaoxiao · 2018年01月24日 · 最后由 miclle 回复于 2018年01月26日 · 6739 次阅读

前端不牛(痛点),所以请教一下论坛里的前端牛人,app 更新的后经常出现类似启动说明页,我想用 html 实现类似的效果,请教一下有没有什么链接或者关键字可以进行搜索。比如 html splash screen 等关键字,找到的一些资料基本上就是用单页,然后设置 timeout 时间后消失。没找到多页,跟 app 一样,手滑下一页说明或者倒计时几秒自动消失。 tips:网上找到的图片,不知名的 app 的启动页

是不是可以考虑用 JS 来做?HTML 应该用来做动画的能力还是比较有限。

lanzhiheng 回复

恩,html 和 js 和 css 怎么做,有没有类似的教程

xiaoxiao 回复

没有见过相关的教程。手滑的话,感觉监听浏览器的 touch 事件就可以做到。倒计时几秒后消失的话用 JS 原生的 setTimeout 事件就可以做到。如果你需要一些淡化的过度效果的话可能需要自己学一些相关的东西。简单点可以用 jQuery 的动画函数 http://api.jquery.com/animate/css来写要容易一些。来实现对应的动画效果,这可能要比用

通过 CSS 就能实现 先用 position 实现一个遮罩,然后用 transform, animation 来处理动画

https://codepen.io/mgitch/pen/pECcD

需要 登录 后方可回复, 如果你还没有账号请 注册新账号