* {
padding:0;
margin:0;
}
html,body {
width:100%;
height:100%;
overflow:hidden;
}
ol,ul {
list-style:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}
caption,th,td {
text-align:left;
font-weight:normal;
vertical-align:middle;
}
q,blockquote {
quotes:none;
}
q:before,q:after,blockquote:before,blockquote:after {
content:"";
content:none;
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
display:block;
}
body {
position:relative;
background-position:center;
width:100%;
height:100%;
overflow-y:hidden;
background-size:100% 100%;
font-size:0;
}
.couten {
width:100%;
height:100%;
overflow:hidden;
position:absolute;
}
.couten li {
position:absolute;
animation:all 3s linear;
top:-100px;
-webkit-tap-highlight-color:rgba(0,0,0,0);
z-index:999;
}
.couten li a {
display:block;
}
.mo {
position:absolute;
top:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.2);
z-index:9999;
display:none;
}
.mo .sen {
width:70%;
height:150px;
font-size:16px;
color:#fff;
border-radius:5px;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
button {
width:200px;
height:50px;
background:beige;
font-size:18px;
position:relative;
left:50%;
margin-left:-100px;
border:none;
outline:none;
}
h3 {
width:100%;
text-align:center;
}
i {
font-style:normal;
}
.hid {
visibility:hidden !important;
}
.sweet-overlay {
background-color:rgba(0,0,0,0.4);
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
display:none;
z-index:1000;
}
.sweet-alert {
background-color:white;
font-family:'Microsoft Yahei';
width:478px;
padding:17px;
border-radius:5px;
text-align:center;
position:fixed;
left:50%;
top:50%;
margin-left:-256px;
margin-top:-200px;
overflow:hidden;
display:none;
z-index:2000;
}
@media all and (max-width:540px) {
.sweet-alert {
width:auto;
margin-left:0;
margin-right:0;
left:15px;
right:15px;
}
}.sweet-alert h2 {
color:#575757;
font-size:30px;
text-align:center;
font-weight:600;
text-transform:none;
position:relative;
}
.sweet-alert p {
color:#797979;
font-size:16px;
text-align:center;
font-weight:300;
position:relative;
margin:0;
line-height:normal;
}
.sweet-alert button {
font-family:Arial,Helvetica,sans-serif;
background-color:#AEDEF4;
color:white;
border:none;
box-shadow:none;
font-size:17px;
font-weight:500;
border-radius:5px;
padding:10px 32px;
margin:26px 5px 0 5px;
cursor:pointer;
}
.sweet-alert button:focus {
outline:none;
box-shadow:0 0 2px rgba(128,179,235,0.5),inset 0 0 0 1px rgba(0,0,0,0.05);
}
.sweet-alert button:hover {
background-color:#a1d9f2;
}
.sweet-alert button:active {
background-color:#81ccee;
}
.sweet-alert button.cancel {
background-color:#D0D0D0;
}
.sweet-alert button.cancel:hover {
background-color:#c8c8c8;
}
.sweet-alert button.cancel:active {
background-color:#b6b6b6;
}
.sweet-alert button.cancel:focus {
box-shadow:rgba(197,205,211,0.8) 0px 0px 2px,rgba(0,0,0,0.0470588) 0px 0px 0px 1px inset !important;
}
.sweet-alert[data-has-cancel-button=false] button {
box-shadow:none !important;
}
.sweet-alert .icon {
width:80px;
height:80px;
border:4px solid gray;
border-radius:50%;
margin:20px auto;
position:relative;
box-sizing:content-box;
}
.sweet-alert .icon.error {
border-color:#F27474;
}
.sweet-alert .icon.error .x-mark {
position:relative;
display:block;
}
.sweet-alert .icon.error .line {
position:absolute;
height:5px;
width:47px;
background-color:#F27474;
display:block;
top:37px;
border-radius:2px;
}
.sweet-alert .icon.error .line.left {
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
left:17px;
}
.sweet-alert .icon.error .line.right {
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
right:16px;
}
.sweet-alert .icon.warning {
border-color:#F8BB86;
}
.sweet-alert .icon.warning .body {
position:absolute;
width:5px;
height:47px;
left:50%;
top:10px;
border-radius:2px;
margin-left:-2px;
background-color:#F8BB86;
}
.sweet-alert .icon.warning .dot {
position:absolute;
width:7px;
height:7px;
border-radius:50%;
margin-left:-3px;
left:50%;
bottom:10px;
background-color:#F8BB86;
}
.sweet-alert .icon.info {
border-color:#C9DAE1;
}
.sweet-alert .icon.info::before {
content:"";
position:absolute;
width:5px;
height:29px;
left:50%;
bottom:17px;
border-radius:2px;
margin-left:-2px;
background-color:#C9DAE1;
}
.sweet-alert .icon.info::after {
content:"";
position:absolute;
width:7px;
height:7px;
border-radius:50%;
margin-left:-3px;
top:19px;
background-color:#C9DAE1;
}
.sweet-alert .icon.success {
border-color:#A5DC86;
}
.sweet-alert .icon.success::before,.sweet-alert .icon.success::after {
content:'';
border-radius:50%;
position:absolute;
width:60px;
height:120px;
background:white;
transform:rotate(45deg);
}
.sweet-alert .icon.success::before {
border-radius:120px 0 0 120px;
top:-7px;
left:-33px;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-transform-origin:60px 60px;
transform-origin:60px 60px;
}
.sweet-alert .icon.success::after {
border-radius:0 120px 120px 0;
top:-11px;
left:30px;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-transform-origin:0px 60px;
transform-origin:0px 60px;
}
.sweet-alert .icon.success .placeholder {
width:80px;
height:80px;
border:4px solid rgba(165,220,134,0.2);
border-radius:50%;
box-sizing:content-box;
position:absolute;
left:-4px;
top:-4px;
z-index:2;
}
.sweet-alert .icon.success .fix {
width:5px;
height:90px;
background-color:white;
position:absolute;
left:28px;
top:8px;
z-index:1;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.sweet-alert .icon.success .line {
height:5px;
background-color:#A5DC86;
display:block;
border-radius:2px;
position:absolute;
z-index:2;
}
.sweet-alert .icon.success .line.tip {
width:25px;
left:14px;
top:46px;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
.sweet-alert .icon.success .line.long {
width:47px;
right:8px;
top:38px;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.sweet-alert .icon.custom {
width:118px !important;
height:122px !important;
background-size:contain;
border-radius:0;
border:none;
background-position:center center;
background-repeat:no-repeat;
}
@-webkit-keyframes showSweetAlert {
0% {
transform:scale(0.7);
-webkit-transform:scale(0.7);
}
45% {
transform:scale(1.05);
-webkit-transform:scale(1.05);
}
80% {
transform:scale(0.95);
-webkit-tranform:scale(0.95);
}
100% {
transform:scale(1);
-webkit-transform:scale(1);
}
}@-moz-keyframes showSweetAlert {
0% {
transform:scale(0.7);
-webkit-transform:scale(0.7);
}
45% {
transform:scale(1.05);
-webkit-transform:scale(1.05);
}
80% {
transform:scale(0.95);
-webkit-tranform:scale(0.95);
}
100% {
transform:scale(1);
-webkit-transform:scale(1);
}
}@keyframes showSweetAlert {
0% {
transform:scale(0.7);
-webkit-transform:scale(0.7);
}
45% {
transform:scale(1.05);
-webkit-transform:scale(1.05);
}
80% {
transform:scale(0.95);
-webkit-tranform:scale(0.95);
}
100% {
transform:scale(1);
-webkit-transform:scale(1);
}
}@-webkit-keyframes hideSweetAlert {
0% {
transform:scale(1);
-webkit-transform:scale(1);
}
100% {
transform:scale(0.5);
-webkit-transform:scale(0.5);
}
}@-moz-keyframes hideSweetAlert {
0% {
transform:scale(1);
-webkit-transform:scale(1);
}
100% {
transform:scale(0.5);
-webkit-transform:scale(0.5);
}
}@keyframes hideSweetAlert {
0% {
transform:scale(1);
-webkit-transform:scale(1);
}
100% {
transform:scale(0.5);
-webkit-transform:scale(0.5);
}
}.showSweetAlert {
-webkit-animation:showSweetAlert 0.3s;
-moz-animation:showSweetAlert 0.3s;
animation:showSweetAlert 0.3s;
}
.hideSweetAlert {
-webkit-animation:hideSweetAlert 0.2s;
-moz-animation:hideSweetAlert 0.2s;
animation:hideSweetAlert 0.2s;
}
@-webkit-keyframes animateSuccessTip {
0% {
width:0;
left:1px;
top:19px;
}
54% {
width:0;
left:1px;
top:19px;
}
70% {
width:50px;
left:-8px;
top:37px;
}
84% {
width:17px;
left:21px;
top:48px;
}
100% {
width:25px;
left:14px;
top:45px;
}
}@-moz-keyframes animateSuccessTip {
0% {
width:0;
left:1px;
top:19px;
}
54% {
width:0;
left:1px;
top:19px;
}
70% {
width:50px;
left:-8px;
top:37px;
}
84% {
width:17px;
left:21px;
top:48px;
}
100% {
width:25px;
left:14px;
top:45px;
}
}@keyframes animateSuccessTip {
0% {
width:0;
left:1px;
top:19px;
}
54% {
width:0;
left:1px;
top:19px;
}
70% {
width:50px;
left:-8px;
top:37px;
}
84% {
width:17px;
left:21px;
top:48px;
}
100% {
width:25px;
left:14px;
top:45px;
}
}@-webkit-keyframes animateSuccessLong {
0% {
width:0;
right:46px;
top:54px;
}
65% {
width:0;
right:46px;
top:54px;
}
84% {
width:55px;
right:0px;
top:35px;
}
100% {
width:47px;
right:8px;
top:38px;
}
}@-moz-keyframes animateSuccessLong {
0% {
width:0;
right:46px;
top:54px;
}
65% {
width:0;
right:46px;
top:54px;
}
84% {
width:55px;
right:0px;
top:35px;
}
100% {
width:47px;
right:8px;
top:38px;
}
}@keyframes animateSuccessLong {
0% {
width:0;
right:46px;
top:54px;
}
65% {
width:0;
right:46px;
top:54px;
}
84% {
width:55px;
right:0px;
top:35px;
}
100% {
width:47px;
right:8px;
top:38px;
}
}@-webkit-keyframes rotatePlaceholder {
0% {
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
5% {
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
12% {
transform:rotate(-405deg);
-webkit-transform:rotate(-405deg);
}
100% {
transform:rotate(-405deg);
-webkit-transform:rotate(-405deg);
}
}@-moz-keyframes rotatePlaceholder {
0% {
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
5% {
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
12% {
transform:rotate(-405deg);
-webkit-transform:rotate(-405deg);
}
100% {
transform:rotate(-405deg);
-webkit-transform:rotate(-405deg);
}
}@keyframes rotatePlaceholder {
0% {
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
5% {
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
12% {
transform:rotate(-405deg);
-webkit-transform:rotate(-405deg);
}
100% {
transform:rotate(-405deg);
-webkit-transform:rotate(-405deg);
}
}.animateSuccessTip {
-webkit-animation:animateSuccessTip 0.75s;
-moz-animation:animateSuccessTip 0.75s;
animation:animateSuccessTip 0.75s;
}
.animateSuccessLong {
-webkit-animation:animateSuccessLong 0.75s;
-moz-animation:animateSuccessLong 0.75s;
animation:animateSuccessLong 0.75s;
}
.icon.success.animate::after {
-webkit-animation:rotatePlaceholder 4.25s ease-in;
-moz-animation:rotatePlaceholder 4.25s ease-in;
animation:rotatePlaceholder 4.25s ease-in;
}
@-webkit-keyframes animateErrorIcon {
0% {
transform:rotateX(100deg);
-webkit-transform:rotateX(100deg);
opacity:0;
}
100% {
transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
opacity:1;
}
}@-moz-keyframes animateErrorIcon {
0% {
transform:rotateX(100deg);
-webkit-transform:rotateX(100deg);
opacity:0;
}
100% {
transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
opacity:1;
}
}@keyframes animateErrorIcon {
0% {
transform:rotateX(100deg);
-webkit-transform:rotateX(100deg);
opacity:0;
}
100% {
transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
opacity:1;
}
}.animateErrorIcon {
-webkit-animation:animateErrorIcon 0.5s;
-moz-animation:animateErrorIcon 0.5s;
animation:animateErrorIcon 0.5s;
}
@-webkit-keyframes animateXMark {
0% {
transform:scale(0.4);
-webkit-transform:scale(0.4);
margin-top:26px;
opacity:0;
}
50% {
transform:scale(0.4);
-webkit-transform:scale(0.4);
margin-top:26px;
opacity:0;
}
80% {
transform:scale(1.15);
-webkit-transform:scale(1.15);
margin-top:-6px;
}
100% {
transform:scale(1);
-webkit-transform:scale(1);
margin-top:0;
opacity:1;
}
}@-moz-keyframes animateXMark {
0% {
transform:scale(0.4);
-webkit-transform:scale(0.4);
margin-top:26px;
opacity:0;
}
50% {
transform:scale(0.4);
-webkit-transform:scale(0.4);
margin-top:26px;
opacity:0;
}
80% {
transform:scale(1.15);
-webkit-transform:scale(1.15);
margin-top:-6px;
}
100% {
transform:scale(1);
-webkit-transform:scale(1);
margin-top:0;
opacity:1;
}
}@keyframes animateXMark {
0% {
transform:scale(0.4);
-webkit-transform:scale(0.4);
margin-top:26px;
opacity:0;
}
50% {
transform:scale(0.4);
-webkit-transform:scale(0.4);
margin-top:26px;
opacity:0;
}
80% {
transform:scale(1.15);
-webkit-transform:scale(1.15);
margin-top:-6px;
}
100% {
transform:scale(1);
-webkit-transform:scale(1);
margin-top:0;
opacity:1;
}
}.animateXMark {
-webkit-animation:animateXMark 0.5s;
-moz-animation:animateXMark 0.5s;
animation:animateXMark 0.5s;
}
@-webkit-keyframes pulseWarning {
0% {
border-color:#F8D486;
}
100% {
border-color:#F8BB86;
}
}@-moz-keyframes pulseWarning {
0% {
border-color:#F8D486;
}
100% {
border-color:#F8BB86;
}
}@keyframes pulseWarning {
0% {
border-color:#F8D486;
}
100% {
border-color:#F8BB86;
}
}.pulseWarning {
-webkit-animation:pulseWarning 0.75s infinite alternate;
-moz-animation:pulseWarning 0.75s infinite alternate;
animation:pulseWarning 0.75s infinite alternate;
}
@-webkit-keyframes pulseWarningIns {
0% {
background-color:#F8D486;
}
100% {
background-color:#F8BB86;
}
}@-moz-keyframes pulseWarningIns {
0% {
background-color:#F8D486;
}
100% {
background-color:#F8BB86;
}
}@keyframes pulseWarningIns {
0% {
background-color:#F8D486;
}
100% {
background-color:#F8BB86;
}
}.pulseWarningIns {
-webkit-animation:pulseWarningIns 0.75s infinite alternate;
-moz-animation:pulseWarningIns 0.75s infinite alternate;
animation:pulseWarningIns 0.75s infinite alternate;
}
settimeout(add, 1000)//开始时间
8000, function() {//下落速度