Html
    Css
    Js

    
                        
* {
	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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

随机红包雨,点击获取随机金额

settimeout(add, 1000)//开始时间

8000, function() {//下落速度

0