291 lines
6.3 KiB
CSS
291 lines
6.3 KiB
CSS
*{
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
body{
|
|
font-family: "微软雅黑"
|
|
}
|
|
.alert-modal{
|
|
left:0;
|
|
top:0;
|
|
width:100%;
|
|
height:100%;
|
|
background: #000;
|
|
opacity: 0.6;
|
|
filter: alpha(opacity=60);
|
|
}
|
|
.alert-container{
|
|
display: inline-block;
|
|
border-radius: 5px;
|
|
-webkit-border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
-o-border-radius: 5px;
|
|
background: #fff;
|
|
border:1px solid #f1f1f1;
|
|
z-index: 99999;
|
|
overflow: hidden;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
-o-box-sizing: border-box;
|
|
-ms-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
.alert-title{
|
|
font-size: 16px;
|
|
text-align: center;
|
|
line-height: 42px;
|
|
color:#111;
|
|
background: #fff;
|
|
position: absolute;
|
|
left:0;
|
|
top:0;
|
|
z-index: 999;
|
|
width:100%;
|
|
text-align: center;
|
|
}
|
|
.alert-content{
|
|
font-size: 14px;
|
|
padding:15px 20px;
|
|
color:#555;
|
|
height:100%;
|
|
overflow: auto;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
-o-box-sizing: border-box;
|
|
-ms-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
.alert-content-scrollbar{
|
|
|
|
}
|
|
.alert-btn-box{
|
|
border-top:1px solid #f1f1f1;
|
|
text-align: right;
|
|
position: absolute;
|
|
left:0;
|
|
background: #fff;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
width:100%;
|
|
}
|
|
.alert-btn-p{
|
|
display: inline-block;
|
|
text-align: center;
|
|
border-right:1px solid #f1f1f1;
|
|
background-color: #fff;
|
|
font-size:14px;
|
|
line-height: 35px;
|
|
cursor: pointer;
|
|
color:#222;
|
|
box-sizing: border-box;
|
|
}
|
|
.alert-btn-p:hover{
|
|
background: #eee;
|
|
}
|
|
.alert-btn-p:last-child{
|
|
border-right: none;
|
|
}
|
|
.pcAlert .alert-btn-box{
|
|
padding-right:10px;
|
|
border:none;
|
|
}
|
|
.pcAlert .alert-btn-p{
|
|
border:1px solid #f1f1f1;
|
|
border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
-o-border-radius: 3px;
|
|
box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-o-box-sizing: border-box;
|
|
line-height: 30px;
|
|
margin:7px 0;
|
|
padding:0 10px;
|
|
margin-right:10px;
|
|
}
|
|
.alert-btn-close{
|
|
position: absolute;
|
|
right:10px;
|
|
top:3px;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.alert-container-black{
|
|
background-color:rgba(0,0,0,0.65);
|
|
border:none;
|
|
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
|
|
}
|
|
.alert-container-black .alert-content{
|
|
color: #fff;
|
|
}
|
|
|
|
.linearTop{
|
|
-webkit-animation-name: linearTop;
|
|
-moz-animation-name: linearTop;
|
|
-o-animation-name: linearTop;
|
|
animation-name: linearTop;
|
|
}
|
|
|
|
.linearBottom{
|
|
-webkit-animation-name: linearBottom;
|
|
-moz-animation-name: linearBottom;
|
|
-o-animation-name: linearBottom;
|
|
animation-name: linearBottom;
|
|
}
|
|
|
|
/*alert-actionsheet*/
|
|
.alert-actionsheet{
|
|
border-radius: 0;
|
|
background-color: #ddd;
|
|
}
|
|
.alert-actionsheet .alert-content{
|
|
display: none;
|
|
}
|
|
.none{
|
|
display: none;
|
|
}
|
|
.alert-actionsheet .alert-title{
|
|
color: #aaa;
|
|
line-height: 50px;
|
|
}
|
|
.alert-actionsheet .alert-title,.alert-actionsheet .alert-btn-box{
|
|
position: static;
|
|
}
|
|
.alert-actionsheet .alert-btn-p{
|
|
font-size: 16px;
|
|
display: block;
|
|
line-height: 40px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.alert-actionsheet .alert-btn-box{
|
|
background-color: transparent;
|
|
}
|
|
.alert-actionsheet .alert-btn-sheet{
|
|
margin-top:5px;
|
|
}
|
|
@keyframes linearBottom {
|
|
0%{
|
|
-webkit-transform: translate3d(0,0,0);
|
|
-moz-transform: translate3d(0,0,0);
|
|
-o-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
opacity: 1;
|
|
filter:alpha(opacity=100);
|
|
}
|
|
100%{
|
|
-webkit-transform: translate3d(0,80px,0);
|
|
-moz-transform: translate3d(0,80px,0);
|
|
-o-transform: translate3d(0,80px,0);
|
|
transform: translate3d(0,80px,0);
|
|
opacity: 0;
|
|
filter:alpha(opacity=0);
|
|
}
|
|
}
|
|
|
|
@keyframes linearTop {
|
|
0%{
|
|
-webkit-transform: translate3d(0,80px,0);
|
|
-moz-transform: translate3d(0,80px,0);
|
|
-o-transform: translate3d(0,80px,0);
|
|
transform: translate3d(0,80px,0);
|
|
opacity: 0;
|
|
filter:alpha(opacity=0);
|
|
}
|
|
100%{
|
|
-webkit-transform: translate3d(0,0,0);
|
|
-moz-transform: translate3d(0,0,0);
|
|
-o-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
opacity: 1;
|
|
filter:alpha(opacity=100);
|
|
}
|
|
}
|
|
|
|
/*显示动画*/
|
|
|
|
|
|
.animated.infinite {
|
|
animation-iteration-count: infinite;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-moz-animation-iteration-count: infinite;
|
|
-o-animation-iteration-count: infinite;
|
|
}
|
|
.animated.linearBottom,
|
|
.animated.linearTop,
|
|
.animated.bounceIn,
|
|
.animated.bounceOut {
|
|
-webkit-animation-duration: .45s;
|
|
-moz-animation-duration: .45s;
|
|
-o-animation-duration: .45s;
|
|
animation-duration: .45s;
|
|
}
|
|
@keyframes bounceIn {
|
|
0%, 20%, 40%, 60%, 80%, 100% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
-moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
-o-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
}
|
|
|
|
0% {
|
|
opacity: 0;
|
|
filter:alpha(opacity=0);
|
|
-webkit-transform: scale3d(.3, .3, .3);
|
|
-moz-transform: scale3d(.3, .3, .3);
|
|
-o-transform: scale3d(.3, .3, .3);
|
|
transform: scale3d(.3, .3, .3);
|
|
}
|
|
|
|
|
|
100% {
|
|
opacity: 1;
|
|
filter: alpha(opacity=100);
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
-moz-transform: scale3d(1, 1, 1);
|
|
-o-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
.bounceIn {
|
|
-webkit-animation-name: bounceIn;
|
|
-moz-animation-name: bounceIn;
|
|
-o-animation-name: bounceIn;
|
|
animation-name: bounceIn;
|
|
}
|
|
@keyframes bounceOut {
|
|
20% {
|
|
-webkit-transform: scale3d(1.2, 1.2, 1.2);
|
|
-moz-transform: scale3d(1.2, 1.2, 1.2);
|
|
-o-transform: scale3d(1.2, 1.2, 1.2);
|
|
transform: scale3d(1.2, 1.2, 1.2);
|
|
}
|
|
|
|
65%, 70% {
|
|
opacity: 1;
|
|
filter: alpha(opacity=100);
|
|
-webkit-transform: scale3d(.75, .75, .75);
|
|
-moz-transform: scale3d(.75, .75, .75);
|
|
-o-transform: scale3d(.75, .75, .75);
|
|
transform: scale3d(.75, .75, .75);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
filter: alpha(opacity=0);
|
|
-webkit-transform: scale3d(.3, .3, .3);
|
|
-moz-transform: scale3d(.3, .3, .3);
|
|
-o-transform: scale3d(.3, .3, .3);
|
|
transform: scale3d(.3, .3, .3);
|
|
}
|
|
}
|
|
|
|
.bounceOut {
|
|
-webkit-animation-name: bounceOut;
|
|
-moz-animation-name: bounceOut;
|
|
-o-animation-name: bounceOut;
|
|
animation-name: bounceOut;
|
|
} |