* { 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() {//下落速度