324 lines
6.7 KiB
CSS
324 lines
6.7 KiB
CSS
.layui-layer-msg {
|
|
border-color: transparent !important;
|
|
box-shadow: 2px 0 6px rgb(0 21 41 / 0.04) !important;
|
|
}
|
|
|
|
/* 扩展动画开始 */
|
|
.pear-drawer.layui-layer {
|
|
border-radius: 0 !important;
|
|
overflow: auto;
|
|
}
|
|
|
|
.pear-drawer.layui-layer.position-absolute {
|
|
position: absolute !important;
|
|
}
|
|
.pear-drawer-anim,
|
|
.pear-drawer-anim.layui-anim {
|
|
-webkit-animation-duration: .3s;
|
|
animation-duration: .3s;
|
|
-webkit-animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
|
|
animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
|
|
}
|
|
|
|
/* right to left */
|
|
@keyframes layer-rl {
|
|
from {
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
-ms-transform: translate3d(100%, 0, 0);
|
|
transform: translate3d(100%, 0, 0);
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes layer-rl {
|
|
from {
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
-ms-transform: translate3d(100%, 0, 0);
|
|
transform: translate3d(100%, 0, 0);
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.layer-anim-rl {
|
|
-webkit-animation-name: layer-rl;
|
|
animation-name: layer-rl;
|
|
}
|
|
|
|
/* right to left close */
|
|
@keyframes layer-rl-close {
|
|
from {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
-ms-transform: translate3d(100%, 0, 0);
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes layer-rl-close {
|
|
from {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
-ms-transform: translate3d(100%, 0, 0);
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
}
|
|
|
|
.layer-anim-rl-close,
|
|
.layer-anim-rl.layer-anim-close {
|
|
-webkit-animation-name: layer-rl-close;
|
|
animation-name: layer-rl-close;
|
|
}
|
|
|
|
/* left to right */
|
|
@-webkit-keyframes layer-lr {
|
|
from {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
opacity: 1
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
-ms-transform: translate3d(-100%, 0, 0);
|
|
transform: translate3d(-100%, 0, 0);
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
@keyframes layer-lr {
|
|
from {
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
-ms-transform: translate3d(-100%, 0, 0);
|
|
transform: translate3d(-100%, 0, 0);
|
|
opacity: 1
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
.layer-anim-lr {
|
|
-webkit-animation-name: layer-lr;
|
|
animation-name: layer-lr
|
|
}
|
|
|
|
/* left to right close */
|
|
@-webkit-keyframes layer-lr-close {
|
|
from {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
-ms-transform: translate3d(-100%, 0, 0);
|
|
transform: translate3d(-100%, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes layer-lr-close {
|
|
from {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
-ms-transform: translate3d(-100%, 0, 0);
|
|
transform: translate3d(-100%, 0, 0);
|
|
}
|
|
}
|
|
|
|
.layer-anim-lr-close,
|
|
.layer-anim-lr.layer-anim-close {
|
|
-webkit-animation-name: layer-lr-close;
|
|
animation-name: layer-lr-close
|
|
}
|
|
|
|
/* top to bottom */
|
|
@-webkit-keyframes layer-tb {
|
|
from {
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
|
-ms-transform: translate3d(0, -100%, 0);
|
|
transform: translate3d(0, -100%, 0);
|
|
opacity: 1;
|
|
animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
opacity: 1;
|
|
animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes layer-tb {
|
|
from {
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
|
-ms-transform: translate3d(0, -100%, 0);
|
|
transform: translate3d(0, -100%, 0);
|
|
opacity: 1;
|
|
animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
opacity: 1;
|
|
animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
|
|
}
|
|
}
|
|
|
|
.layer-anim-tb {
|
|
-webkit-animation-name: layer-tb;
|
|
animation-name: layer-tb
|
|
}
|
|
|
|
/* top to bottom close */
|
|
@-webkit-keyframes layer-tb-close {
|
|
from {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
|
-ms-transform: translate3d(0, -100%, 0);
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes layer-tb-close {
|
|
from {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
|
-ms-transform: translate3d(0, -100%, 0);
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
}
|
|
|
|
.layer-anim-tb-close,
|
|
.layer-anim-tb.layer-anim-close {
|
|
-webkit-animation-name: layer-tb-close;
|
|
animation-name: layer-tb-close
|
|
}
|
|
|
|
/* bottom to top */
|
|
@-webkit-keyframes layer-bt {
|
|
from {
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
-ms-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
opacity: 1
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
@keyframes layer-bt {
|
|
from {
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
-ms-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
opacity: 1
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
.layer-anim-bt {
|
|
-webkit-animation-name: layer-bt;
|
|
animation-name: layer-bt
|
|
}
|
|
|
|
/* bottom to top close */
|
|
@-webkit-keyframes layer-bt-close {
|
|
from {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
-ms-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes layer-bt-close {
|
|
from {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
-ms-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
|
|
}
|
|
}
|
|
|
|
.layer-anim-bt-close,
|
|
.layer-anim-bt.layer-anim-close {
|
|
-webkit-animation-name: layer-bt-close;
|
|
animation-name: layer-bt-close
|
|
}
|
|
|
|
/* 扩展动画结束 */ |