初始版本
This commit is contained in:
636
statics/mobile/css/mobiscroll.css
Executable file
636
statics/mobile/css/mobiscroll.css
Executable file
@@ -0,0 +1,636 @@
|
||||
.dw-trans .dw-persp {
|
||||
overflow: hidden;
|
||||
perspective: 1000;
|
||||
-webkit-perspective: 1000;
|
||||
-moz-perspective: 1000;
|
||||
}
|
||||
.dw-trans .dwwb {
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
.dw-in {
|
||||
animation-timing-function: ease-out;
|
||||
animation-duration: 350ms;
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
-webkit-animation-duration: 350ms;
|
||||
-moz-animation-timing-function: ease-out;
|
||||
-moz-animation-duration: 350ms;
|
||||
}
|
||||
.dw-out {
|
||||
animation-timing-function: ease-in;
|
||||
animation-duration: 350ms;
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
-webkit-animation-duration: 350ms;
|
||||
-moz-animation-timing-function: ease-in;
|
||||
-moz-animation-duration: 350ms;
|
||||
}
|
||||
.dw-flip,
|
||||
.dw-swing,
|
||||
.dw-slidehorizontal,
|
||||
.dw-slidevertical,
|
||||
.dw-slidedown,
|
||||
.dw-slideup,
|
||||
.dw-fade {
|
||||
backface-visibility: hidden;
|
||||
transform: translateX(0);
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-transform: translateX(0);
|
||||
-moz-backface-visibility: hidden;
|
||||
-moz-transform: translateX(0);
|
||||
}
|
||||
.dw-swing,
|
||||
.dw-slidehorizontal,
|
||||
.dw-slidevertical,
|
||||
.dw-slidedown,
|
||||
.dw-slideup,
|
||||
.dw-fade {
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform-origin: 0 0;
|
||||
-moz-transform-origin: 0 0;
|
||||
}
|
||||
.dw-flip,
|
||||
.dw-pop {
|
||||
transform-origin: 50% 50%;
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
-moz-transform-origin: 50% 50%;
|
||||
}
|
||||
.dw-pop.dw-in {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
animation-name: dw-p-in;
|
||||
-webkit-animation-name: dw-p-in;
|
||||
-webkit-transform: scale(1);
|
||||
-moz-animation-name: dw-p-in;
|
||||
-moz-transform: scale(1);
|
||||
}
|
||||
.dw-pop.dw-out {
|
||||
opacity: 0;
|
||||
animation-name: dw-p-out;
|
||||
-webkit-animation-name: dw-p-out;
|
||||
-moz-animation-name: dw-p-out;
|
||||
}
|
||||
.dw-flip.dw-in {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
animation-name: dw-fl-in;
|
||||
-webkit-animation-name: dw-fl-in;
|
||||
-webkit-transform: scale(1);
|
||||
-moz-animation-name: dw-fl-in;
|
||||
-moz-transform: scale(1);
|
||||
}
|
||||
.dw-flip.dw-out {
|
||||
opacity: 0;
|
||||
animation-name: dw-fl-out;
|
||||
-webkit-animation-name: dw-fl-out;
|
||||
-moz-animation-name: dw-fl-out;
|
||||
}
|
||||
.dw-swing.dw-in {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
animation-name: dw-sw-in;
|
||||
-webkit-animation-name: dw-sw-in;
|
||||
-webkit-transform: scale(1);
|
||||
-moz-animation-name: dw-sw-in;
|
||||
-moz-transform: scale(1);
|
||||
}
|
||||
.dw-swing.dw-out {
|
||||
opacity: 0;
|
||||
animation-name: dw-sw-out;
|
||||
-webkit-animation-name: dw-sw-out;
|
||||
-moz-animation-name: dw-sw-out;
|
||||
}
|
||||
.dw-slidehorizontal.dw-in {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
animation-name: dw-sh-in;
|
||||
-webkit-animation-name: dw-sh-in;
|
||||
-webkit-transform: scale(1);
|
||||
-moz-animation-name: dw-sh-in;
|
||||
-moz-transform: scale(1);
|
||||
}
|
||||
.dw-slidehorizontal.dw-out {
|
||||
opacity: 0;
|
||||
animation-name: dw-sh-out;
|
||||
-webkit-animation-name: dw-sh-out;
|
||||
-moz-animation-name: dw-sh-out;
|
||||
}
|
||||
.dw-slidevertical.dw-in {
|
||||
opacity: 1;
|
||||
animation-name: dw-dw-sv-in;
|
||||
transform: scale(1);
|
||||
-webkit-animation-name: dw-dw-sv-in;
|
||||
-webkit-transform: scale(1);
|
||||
-moz-animation-name: dw-dw-sv-in;
|
||||
-moz-transform: scale(1);
|
||||
}
|
||||
.dw-slidevertical.dw-out {
|
||||
opacity: 0;
|
||||
animation-name: dw-sv-out;
|
||||
-webkit-animation-name: dw-sv-out;
|
||||
-moz-animation-name: dw-sv-out;
|
||||
}
|
||||
.dw-slidedown.dw-in {
|
||||
animation-name: dw-sd-in;
|
||||
transform: scale(1);
|
||||
-webkit-animation-name: dw-sd-in;
|
||||
-webkit-transform: scale(1);
|
||||
-moz-animation-name: dw-sd-in;
|
||||
-moz-transform: scale(1);
|
||||
}
|
||||
.dw-slidedown.dw-out {
|
||||
animation-name: dw-sd-out;
|
||||
-webkit-animation-name: dw-sd-out;
|
||||
-moz-animation-name: dw-sd-out;
|
||||
}
|
||||
.dw-slideup.dw-in {
|
||||
transform: scale(1);
|
||||
animation-name: dw-su-in;
|
||||
-webkit-animation-name: dw-su-in;
|
||||
-webkit-transform: scale(1);
|
||||
-moz-animation-name: dw-su-in;
|
||||
-moz-transform: scale(1);
|
||||
}
|
||||
.dw-slideup.dw-out {
|
||||
animation-name: dw-su-out;
|
||||
-webkit-animation-name: dw-su-out;
|
||||
-moz-animation-name: dw-su-out;
|
||||
}
|
||||
.dw-fade.dw-in {
|
||||
opacity: 1;
|
||||
animation-name: dw-f-in;
|
||||
-webkit-animation-name: dw-f-in;
|
||||
-moz-animation-name: dw-f-in;
|
||||
}
|
||||
.dw-fade.dw-out {
|
||||
opacity: 0;
|
||||
animation-name: dw-f-out;
|
||||
-webkit-animation-name: dw-f-out;
|
||||
-moz-animation-name: dw-f-out;
|
||||
}
|
||||
/* Fade in */
|
||||
@keyframes dw-f-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes dw-f-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes dw-f-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
/* Fade out */
|
||||
@keyframes dw-f-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes dw-f-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes dw-f-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
/* Pop in */
|
||||
@keyframes dw-p-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes dw-p-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0.8);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes dw-p-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
-moz-transform: scale(0.8);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-moz-transform: scale(1);
|
||||
}
|
||||
}
|
||||
/* Pop out */
|
||||
@keyframes dw-p-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes dw-p-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes dw-p-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
-moz-transform: scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
-moz-transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
/* Flip in */
|
||||
@keyframes dw-fl-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: rotateY(90deg);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: rotateY(0);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes dw-fl-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: rotateY(90deg);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: rotateY(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes dw-fl-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
-moz-transform: rotateY(90deg);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-moz-transform: rotateY(0);
|
||||
}
|
||||
}
|
||||
/* Flip out */
|
||||
@keyframes dw-fl-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: rotateY(-90deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes dw-fl-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
-webkit-transform: rotateY(0deg);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
-webkit-transform: rotateY(-90deg);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes dw-fl-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
-moz-transform: rotateY(0deg);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
-moz-transform: rotateY(-90deg);
|
||||
}
|
||||
}
|
||||
/* Swing in */
|
||||
@keyframes dw-sw-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: rotateY(-90deg);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes dw-sw-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: rotateY(-90deg);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: rotateY(0deg);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes dw-sw-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
-moz-transform: rotateY(-90deg);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-moz-transform: rotateY(0deg);
|
||||
}
|
||||
}
|
||||
/* Swing out */
|
||||
@keyframes dw-sw-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: rotateY(-90deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes dw-sw-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
-webkit-transform: rotateY(0deg);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
-webkit-transform: rotateY(-90deg);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes dw-sw-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
-moz-transform: rotateY(0deg);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
-moz-transform: rotateY(-90deg);
|
||||
}
|
||||
}
|
||||
/* Slide horizontal in */
|
||||
@keyframes dw-sh-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes dw-sh-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(-100%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes dw-sh-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
-moz-transform: translateX(-100%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-moz-transform: translateX(0);
|
||||
}
|
||||
}
|
||||
/* Slide horizontal out */
|
||||
@keyframes dw-sh-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes dw-sh-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes dw-sh-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
-moz-transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
-moz-transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
/* Slide vertical in */
|
||||
@keyframes dw-dw-sv-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes dw-dw-sv-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-100%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes dw-dw-sv-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(-100%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
/* Slide vertical out */
|
||||
@keyframes dw-sv-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes dw-sv-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes dw-sv-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
/* Slide Down In */
|
||||
@keyframes dw-sd-in {
|
||||
from {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes dw-sd-in {
|
||||
from {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(-100%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes dw-sd-in {
|
||||
from {
|
||||
-moz-transform: translateY(-100%);
|
||||
}
|
||||
to {
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
/* Slide down out */
|
||||
@keyframes dw-sd-out {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes dw-sd-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes dw-sd-out {
|
||||
from {
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
-moz-transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
/* Slide Up In */
|
||||
@keyframes dw-su-in {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes dw-su-in {
|
||||
from {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes dw-su-in {
|
||||
from {
|
||||
-moz-transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
/* Slide up out */
|
||||
@keyframes dw-su-out {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes dw-su-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes dw-su-out {
|
||||
from {
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
-moz-transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user