translate3d

1.启动页（splash）：app的启动界面，每次启动都会看到的； 2.引导页”（guide）：guide是否展示是可控的，一般首次启动时打开，以后直接进入App主界面 启动页配置 在manifest.json文件中[启动图配置],并且配置是否自动关闭,代码如下： { "plus" : { "splashscreen" : { "autoclose" : true, /*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；false则需调plus.navigator.closeSplashscreen()关闭*/ "waiting" : true /*是否在程序启动界面显示等待雪花，true表示显示，false表示不显示。*/ } } } 引导页配置 展示可控，意味着就会有一个标识去判断是否为首次打开。标识本地储存，可参考Hello mui启动页，逻辑如下： mui.plusReady(function() { //读取本地存储，检查是否为首次启动 var showGuide = plus.storage.getItem("lauchFlag"); //仅支持竖屏显示 plus.screen.lockOrientation("portrait-primary"); if(showGuide) { //有值，说明已经显示过了，无需显示； //关闭splash页面；

动画效果用的插件css（引入类名就可以直接可以进行使用相应的动画效果） 放上效果图： 布局可能有点奇怪，放上源码供参考 以下css代码来源jq插件（ http://www.jq22.com/jquery-info819?tdsourcetag=s_pcqq_aiomsg ） @charset "UTF-8"; /*! * animate.css -http://daneden.me/animate * Version - 3.5.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2016 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .animated.hinge { -webkit-animation

<p><strong>单击</strong> 按钮以激活其动画。</p> <div class='btn-container'> <button class='btn btn--shockwave is-active'> Shockwave </button> <button class='btn btn--jump'> Jump </button> <button class='btn btn--pulse'> Pulse </button> <button class='btn btn--blink'> Blink </button> <button class='btn btn--wiggle'> Wiggle </button> <button class='btn btn--wut'> Hatching Alien </button> </div> 　　 body { max-width: 600px; margin: 4.8rem auto; background: #acd4e4; font-family: tahoma, helvetica neue, helvetica, arial, sans-serif; background: linear-gradient(to right, #acd4e4, #bbe0df); text-align: center; }

Translating an elements Y axis 50% will move it down 50% of its own height, not 50% of the parents height as I would expect. How do I tell a translating element to base it's translation percentage on the parent element? Or am I not understanding something? http://jsfiddle.net/4wqEm/2/ bowen When using percentage in translate, it refers to width or height of itself. Take a look at https://davidwalsh.name/css-vertical-center ( demo ): One interesting thing about CSS transforms is that, when applying them with percentage values, they base that value on the dimensions of the element which they are

I'm seeing an issue where Chrome and other WebKit browsers massively blur any css-scaled content that also has translate3d applied. Here's a JS Fiddle: http://jsfiddle.net/5f6Wg/ . (View in Chrome.) .test { -webkit-transform: translate3d(0px, 100px, 0px); } .testInner { /*-webkit-transform: scale(1.2);*/ -webkit-transform: scale3d(1.2, 1.2, 1); text-align: center; } <div class="test"> <div class="testInner"> This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied. </div> </div> Are there any known workarounds for this? I get that in the simple example above, I could