//加载提示,使用方法：
showLoading('加载中...');
$('#wxloading').hide();
function showLoading(text) {
$('#wxloading .weui-toast__content').html(text);
$('#wxloading').show();
}
//成功提示,使用方法：showTostSuc('提交成功');
function showTostSuc(text='提交成功',time=1500) {
$('#wxtostsuc .weui-toast__content').html(text);
$('#wxtostsuc').show();
dt(time).then(function(){
$('#wxtostsuc').fadeOut();
})
}
//失败提示,使用方法：showTostFail('提交成功');
function showTostSuc(text='提交失败',time=1500) {
$('#wxtostsuc .weui-toast__content').html(text);
$('#wxtostsuc').show();
dt(time).then(function(){
$('#wxtostsuc').fadeOut();
})
}
*/
.weui-loadingBg{
position: fixed;width: 100%;height: 100%;left: 0;top: 0;
z-index: 5000;
display: none;
}
.weui-toast{
position: fixed;
width: 2.4rem;
height: 2.4rem;
top: 45%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
text-align: center;
border-radius: 0.1rem;
color: rgba(255,255,255,0.9);
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
/*background-color: #4c4c4c;*/
background-color: rgba(0,0,0,0.7);
}
.weui-toast__content{
font-size: 0.28rem;
color: rgba(255,255,255,0.9);
}
.weui-loading{
margin: 0.16rem 0;
width: 0.76rem;
height: 0.76rem;
vertical-align: baseline;
display: inline-block;
vertical-align: middle;
animation: weuiLoading 1s steps(12, end) infinite;
background: transparent url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E") no-repeat;
background-size: 100%;
}
@-webkit-keyframes weuiLoading {
0% {
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
transform: rotate3d(0, 0, 1, 360deg);
}
}
@keyframes weuiLoading {
0% {
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
transform: rotate3d(0, 0, 1, 360deg);
}
}
.weui-icon-success-no-circle{
-webkit-mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.657%2018.435L3%2012.778l1.414-1.414%204.95%204.95L20.678%205l1.414%201.414-12.02%2012.021a1%201%200%2001-1.415%200z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.657%2018.435L3%2012.778l1.414-1.414%204.95%204.95L20.678%205l1.414%201.414-12.02%2012.021a1%201%200%2001-1.415%200z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
color: rgba(255,255,255,0.9);
display: inline-block;
vertical-align: middle;
font-size: .28rem;
width: 2.4em;
height: 2.4em;
margin-bottom: 0.18rem;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
background-color: currentColor;
}
.weui-icon-warn {
-webkit-mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-.763-15.864l.11%207.596h1.305l.11-7.596h-1.525zm.759%2010.967c.512%200%20.902-.383.902-.882%200-.5-.39-.882-.902-.882a.878.878%200%2000-.896.882c0%20.499.396.882.896.882z%22%2F%3E%3C%2Fsvg%3E);
mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-.763-15.864l.11%207.596h1.305l.11-7.596h-1.525zm.759%2010.967c.512%200%20.902-.383.902-.882%200-.5-.39-.882-.902-.882a.878.878%200%2000-.896.882c0%20.499.396.882.896.882z%22%2F%3E%3C%2Fsvg%3E);
color: rgba(255,255,255,0.9);
display: inline-block;
vertical-align: middle;
font-size: .28rem;
width: 2.4em;
height: 2.4em;
margin-bottom: 0.18rem;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
background-color: currentColor;
}
/*横竖屏判断*/
@media screen and (orientation: portrait) {
#orientLayer {
display: none;
}
}
@media screen and (orientation: landscape) {
#orientLayer {
display: block;
}
}
.mod-orient-layer {
display: none;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #000;
z-index: 9997;
overflow: hidden
}
.mod-orient-layer__content {
position: absolute;
width: 100%;
top: 45%;
margin-top: -0.75rem;
text-align: center
}
.mod-orient-layer__icon-orient {
display: inline-block;
width: 0.67rem;
height: 1.09rem;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAADaCAMAAABU68ovAAAAXVBMVEUAAAD29vb////x8fH////////x8fH5+fn29vby8vL////5+fn39/f6+vr////x8fH////////+/v7////09PT////x8fH39/f////////////////////x8fH///+WLTLGAAAAHXRSTlMAIpML+gb4ZhHWn1c2gvHBvq1uKJcC6k8b187lQ9yhhboAAAQYSURBVHja7d3blpowFIDhTUIAOchZDkre/zE7ycySrbUUpsRN2/1fzO18KzEqxEVgTiZNfgmmtxRc8iaR8HNe8x4BtjQePKayYCIoyBSgvNNE1AkNSHqZyLqk97EgUCCHBzZ5mkg7ScvIJuIyOyXBRFxgpqWZyGsAZLB1KjsJi8nutHU4JCRbFRH8tmirI9k8Jx2sqNs8K/m0LQkrktO2crgcgXGB4AiTEsB0hJfo9MGgX7CGcYiYwQxmMOOvZwRhBG8tCoMXjBDeXvWCEcHbi14wgCBmMIMZzGAGM5jxETNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxY6E2rUQxnH2tz9cirlJFwFBJedaPnUv0M7++egPDE8iAJcIDmxwH5wwv9vUviw2kLbVO3TJU5uul/EyB0FoLp4x60PdGUd3qPurrWyjGGTc05u+1dcgI7/+tCCPARWGhH7o5Y7RCf+bH9ctXLp6v2BVDxfqz0oPXeSVaNtINo/1SXDv4dck8IIkbhtC2ol+iouEonTBCbYvVMnXOjxww6s/RFrBUpXHh/gw1rHj5d/qhYn9Gpk2FWh6xRBRX5Oj3Znh2Sq49/L6+y8pB26q9GbE2dbA2mVbx6I+7MfBglLCttm73ZQi7AD3iL4HqjFYJHSPRppqaUaJ3ATpGa+ckpGak2hRRMyqjGMkvl+xyFeSMwjAqcsZgGDdyhl0oNTnDN4yenJGZFGxNChP5/Y3efh6SM2rDOJMzboYxkDMqwyjIGcIw6F+io2FU1IxIm1JqRmgXSkvNKNCXeTpGrU0JNSO2c6LIGPgCS8AuDHz9ta0SXWDtxoDRH+MqlbC2Dt2G2JFRadtQZt2qq/orGowdGb2euxYiqWEpVWhTBnszoNAPdStuQwxqf0aocdWKW4Z+DfszIh8pxJqbuCE4YAC+4bm0evtipjpgJHeFnyyt1Ku2xa0bhjxr27p75rECNwyI9ZwvXkHq+7aTaMEV44YYy/spfgjgjNHaWW+GeUhGEX7tLlVinIFDDSgnOwhi1V6bU0b6tVS9eAERe863g4dRrtiHdc6o+nn5vtyVVgR79Cqt4uL6gfHPQyGqtP2vf7HADGbcYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JjhtOM+J/AgT008yDMkN/dPP9hzS8zAMQN3OEYeekp5YU7KOKXwVXqiY+QS7smcinGKABWdiBgpPJTSMHJ4KidhhPBUSMLw4CmPhKHgKUXCkHsygum71ftNSgCX6bsl8FQyfbcL5EdYsDk0R3j7aiA5wpt5AjKg/2gLJEBD/0Hf2OOf/vRrj6z/7GtP4B3nMKyjHA12kIPSjnJs3FEO0TvKkYJHOWCR+rjJH0Vn6fI5PjNbAAAAAElFTkSuQmCC');
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-webkit-animation: rotation infinite 1.5s ease-in-out;
animation: rotation infinite 1.5s ease-in-out;
-webkit-background-size: 100%;
background-repeat: no-repeat;
background-size: 100%
}
.mod-orient-layer__desc {
margin-top: 0.2rem;
font-size: 0.18rem;
color: #fff
}
@-webkit-keyframes rotation {
10% {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg)
}
50% {
transform: rotate(0);
-webkit-transform: rotate(0)
}
60% {
transform: rotate(0);
-webkit-transform: rotate(0)
}
90% {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg)
}
100% {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg)
}
}
/*加载等待提示框*/
.loading{
position: fixed;
z-index: 30;
width: 100%;
height: 100%;
padding-top: 60%;
display: none;
}
.loading-modal{
width: 3rem;
margin: auto;
padding: 10% 2%;
background: RGBA(0,0,0,0.5);
border-radius: 0.15rem;
font-size: 0.24rem;
color: #ffffff;
text-align: center;
line-height: 0.7rem;
vertical-align: middle;
}
/* Timer*/
.timer{
width: 0.5rem;
height: 0.5rem;
background-color: transparent;
box-shadow: inset 0rem 0rem 0rem 0.02rem #fff;
border-radius: 50%;
position: relative;
margin: 0.18rem auto 0rem;/* Not necessary- its only for layouting*/
}
.timer:after, .timer:before{
position: absolute;
content:"";
background-color: #fff;
}
.timer:after{
width: 0.15rem;
height: 0.02rem;
top: 0.25rem;
left: 0.25rem;
-webkit-transform-origin: 0.01rem 0.01rem;
-moz-transform-origin: 0.01rem 0.01rem;
transform-origin: 0.01rem 0.01rem;
-webkit-animation: minhand 2s linear infinite;
-moz-animation: minhand 2s linear infinite;
animation: minhand 2s linear infinite;
}
.timer:before{
width: 0.2rem;
height: 0.02rem;
top: 0.25rem;
left: 0.25rem;
-webkit-transform-origin: 0.01rem 0.01rem;
-moz-transform-origin: 0.01rem 0.01rem;
transform-origin: 0.01rem 0.01rem;
-webkit-animation: hrhand 8s linear infinite;
-moz-animation: hrhand 8s linear infinite;
animation: hrhand 8s linear infinite;
}
@-webkit-keyframes minhand{
0%{
-webkit-transform:rotate(0deg)
}
100%{
-webkit-transform:rotate(360deg)
}
}
@-webkit-keyframes hrhand{
0%{
-webkit-transform:rotate(0deg)
}
100%{
-webkit-transform:rotate(360deg)
}
}
/* 锁屏tips */
.tips{
pointer-events: auto;
position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 4.5rem; height: 2.45rem;
padding: 0.45rem 0.3rem;
background: #000;
opacity: 0.8;
border-radius: 0.23rem;
z-index: 30;
}
.tips p{
font-size: 0.24rem;
color: #fff;
text-align: center;
line-height: 1.5;
}
.tips p span{
padding: 0.1rem 0.3rem;
border-radius: 0.08rem;
border: solid 0.01rem;
line-height: 1;
color: #fff;
text-align: center;
}
/*放大缩小进出*/
@-webkit-keyframes zoom-up1 {
0% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: scale3d(3.3, 3.3, 3.3);
transform: scale3d(3.3, 3.3, 3.3)
}
}
@-webkit-keyframes zoom-up2 {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
50% {
opacity: 1
}
}
@-webkit-keyframes zoom-down1 {
0% {
opacity: 1
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
100% {
opacity: 0
}
}
@-webkit-keyframes zoom-down2 {
0% {
opacity: 0;
-webkit-transform: scale3d(3.3, 3.3, 3.3);
transform: scale3d(3.3, 3.3, 3.3)
}
50% {
opacity: 1
}
}
/*淡入淡出*/
@-webkit-keyframes fade-up1 {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes fade-up2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fade-down2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fade-down1 {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/*上下连续翻页*/
@-webkit-keyframes coherentvertical-up1 {
0% {
-webkit-transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, -100%, 0);
}
}
@-webkit-keyframes coherentvertical-up2 {
0% {
-webkit-transform: translate3d(0, 100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes coherentvertical-down1 {
0% {
-webkit-transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 100%, 0);
}
}
@-webkit-keyframes coherentvertical-down2 {
0% {
-webkit-transform: translate3d(0, -100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
}
}
/*左右连续翻页*/
@-webkit-keyframes coherenthorizontal-up1 {
0% {
-webkit-transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
}
}
@-webkit-keyframes coherenthorizontal-up2 {
0% {
-webkit-transform: translate3d(100%, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes coherenthorizontal-down1 {
0% {
-webkit-transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(100%, 0, 0);
}
}
@-webkit-keyframes coherenthorizontal-down2 {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
}
}
/*上下惯性翻页*/
@-webkit-keyframes inertiavertical-up1 {
0% {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale3d(1, 1, 1);
}
100% {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale3d(.1, .1, .1);
}
}
@-webkit-keyframes inertiavertical-up2 {
0% {
-webkit-transform: translate3d(0, 100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes inertiavertical-down1 {
0% {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale3d(1, 1, 1);
}
100% {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale3d(.1, .1, .1);
}
}
@-webkit-keyframes inertiavertical-down2 {
0% {
-webkit-transform: translate3d(0, -100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
}
}
/*左右惯性翻页*/
@-webkit-keyframes inertiahorizontal-up1 {
0% {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: scale3d(1, 1, 1);
}
100% {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: scale3d(.1, .1, .1);
}
}
@-webkit-keyframes inertiahorizontal-up2 {
0% {
-webkit-transform: translate3d(100%, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes inertiahorizontal-down1 {
0% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: scale3d(1, 1, 1);
}
100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: scale3d(.1, .1, .1);
}
}
@-webkit-keyframes inertiahorizontal-down2 {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
}
}
/*上下覆盖翻页*/
@-webkit-keyframes coververtical-up1 {
0% {
-webkit-transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes coververtical-up2 {
0% {
-webkit-transform: translate3d(0, 100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes coververtical-down1 {
0% {
-webkit-transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes coververtical-down2 {
0% {
-webkit-transform: translate3d(0, -100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
}
}
/*左右覆盖翻页*/
@-webkit-keyframes coverhorizontal-up1 {
0% {
-webkit-transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes coverhorizontal-up2 {
0% {
-webkit-transform: translate3d(100%, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes coverhorizontal-down1 {
0% {
-webkit-transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes coverhorizontal-down2 {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
}
}
/*上下推出翻页*/
@-webkit-keyframes launchvertical-up1 {
0% {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(4rem) rotate3d(1,0,0,0);
}
100% {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(4rem) rotate3d(1,0,0,-90deg);
}
}
@-webkit-keyframes launchvertical-up2 {
0% {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(4rem) rotate3d(1,0,0,90deg);
}
100% {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(4rem) rotate3d(1,0,0,0);
}
}
@-webkit-keyframes launchvertical-down1 {
0% {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(4rem) rotate3d(1,0,0,0);
}
100% {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(4rem) rotate3d(1,0,0,90deg);
}
}
@-webkit-keyframes launchvertical-down2 {
0% {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(4rem) rotate3d(1,0,0,-90deg);
}
100% {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(4rem) rotate3d(1,0,0,0);
}
}
/*左右推出翻页*/
@-webkit-keyframes launchhorizontal-up1 {
0% {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: perspective(2rem) rotate3d(0,1,0,0);
}
100% {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: perspective(2rem) rotate3d(0,1,0,90deg);
}
}
@-webkit-keyframes launchhorizontal-up2 {
0% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: perspective(2rem) rotate3d(0,1,0,-90deg);
}
100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: perspective(2rem) rotate3d(0,1,0,0);
}
}
@-webkit-keyframes launchhorizontal-down1 {
0% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: perspective(2rem) rotate3d(0,1,0,0);
}
100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: perspective(2rem) rotate3d(0,1,0,-90deg);
}
}
@-webkit-keyframes launchhorizontal-down2 {
0% {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: perspective(2rem) rotate3d(0,1,0,90deg);
}
100% {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: perspective(2rem) rotate3d(0,1,0,0);
}
}
/*左右交换翻页*/
@-webkit-keyframes exchange-up1 {
0% {
-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}
50% {
-webkit-transform: scale3d(.5, .5, .5) translate3d(-100%, 0, 0);
}
100% {
-webkit-transform: scale3d(.3, .3, .3) translate3d(0, 0, 0);
}
}
@-webkit-keyframes exchange-up2 {
0% {
-webkit-transform: scale3d(.3, .3, .3) translate3d(0, 0, 0);
}
50% {
-webkit-transform: scale3d(.5, .5, .5) translate3d(100%, 0, 0);
}
100% {
-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}
}
@-webkit-keyframes exchange-down1 {
0% {
-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}
50% {
-webkit-transform: scale3d(.5, .5, .5) translate3d(100%, 0, 0);
}
100% {
-webkit-transform: scale3d(.3, .3, .3) translate3d(0, 0, 0);
}
}
@-webkit-keyframes exchange-down2 {
0% {
-webkit-transform: scale3d(.3, .3, .3) translate3d(0, 0, 0);
}
50% {
-webkit-transform: scale3d(.5, .5, .5) translate3d(-100%, 0, 0);
}
100% {
-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}
}
/*3D翻页*/
@-webkit-keyframes cube-up1 {
0% {
-webkit-transform: perspective(calc(90vh)) scale3d(1, 1, 1) rotateX(0deg) translate3d(0, 0, 0);
}
100% {
-webkit-transform: perspective(calc(90vh)) scale3d(.3, .3, .3) rotateX(90deg) translate3d(0, 0, calc(100vh));
}
}
@-webkit-keyframes cube-up2 {
0% {
-webkit-transform: perspective(calc(90vh)) scale3d(.3, .3, .3) rotateX(-90deg) translate3d(0, 0, calc(100vh));
}
100% {
-webkit-transform: perspective(calc(90vh)) scale3d(1, 1, 1) rotateX(0deg) translate3d(0, 0, 0);
}
}
@-webkit-keyframes cube-down1 {
0% {
-webkit-transform: perspective(calc(90vh)) scale3d(1, 1, 1) rotateX(0deg) translate3d(0, 0, 0);
}
100% {
-webkit-transform: perspective(calc(90vh)) scale3d(.3, .3, .3) rotateX(-90deg) translate3d(0, 0, calc(100vh));
}
}
@-webkit-keyframes cube-down2 {
0% {
-webkit-transform: perspective(calc(90vh)) scale3d(.3, .3, .3) rotateX(90deg) translate3d(0, 0, calc(100vh));
}
100% {
-webkit-transform: perspective(calc(90vh)) scale3d(1, 1, 1) rotateX(0deg) translate3d(0, 0, 0);
}
}