div {
	position:relative;
	width:200px;
	height:90px;
	padding:0;
	background:transparent no-repeat scroll 0 0/100% auto;
	border-radius:1.2vh;
	color:rgba(255,255,255,.9);
	overflow:hidden;
	box-shadow:0 0 3px 0 rgba(0,0,0,.3) inset,0 0 2px 0 #000;
	background-image:url(http://www.jq22.com/demo/jQuery-banner201703062207/img/a3.png);
}
div.display-loading-layer {
	-webkit-animation:display-loading-layer .6s linear;
}
div.display-loading-layer::after {
	display:none;
}
div::after {
	position:absolute;
	left:70%;
	content:"";
	height:5.5vh;
	width:5vh;
	background:inherit;
	background-size:100% 80%;
	background-position:50%;
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	transform:rotate(180deg);
	border-radius:80% 80% 120% 120%;
	box-sizing:border-box;
	box-shadow:0 0 3px 1px rgba(0,0,0,.3) inset,0 1px 3px 1px #555;
	-webkit-filter:brightness(.9);
	-moz-filter:brightness(.9);
	filter:brightness(.9);
	-webkit-animation:rain-drop 6s linear infinite;
	-moz-animation:rain-drop 6s linear infinite;
	animation:rain-drop 6s linear infinite;
	z-index:50;
}
div::before {
	position:absolute;
	content:"";
	top:0;
	left:0;
	height:100%;
	width:100%;
	border-radius:inherit;
	background:rgba(0,0,0,.4);
	z-index:100;
}
span {
	opacity:0;
	position:absolute;
	letter-spacing:.1em;
	word-spacing:.1em;
	font-weight:bolder;
	z-index:120;
}
div>span:first-child {
	top:15%;
	left:18%;
}
div>span:last-child {
	top:55%;
	right:18%;
}
div.loaded>span {
	opacity:.9;
}
div.loading>span {
	opacity:0;
}
div.loaded>span:first-child {
	-webkit-animation:tip-flash 4s linear infinite;
}
div.loaded>span:last-child {
	-webkit-animation:tip-flash 4s linear infinite 2s;
}
div.loading>span:first-child {
	-webkit-animation:tip-show 5s linear;
}
div.loading>span:last-child {
	-webkit-animation:tip-show 3s linear 2s;
}
@keyframes rain-drop {
	from {
	top:-110%;
}
10% {
	top:7%;
	left:71%;
}
30% {
	top:7%;
	left:71%;
}
35% {
	top:12%;
	left:71%;
}
38% {
	top:60%;
	left:70%;
}
60% {
	top:65%;
}
80% {
	top:65%;
}
85% {
	top:90%;
}
to {
	top:100%;
}
}@keyframes tip-show {
	from {
	opacity:0;
}
to {
	opacity:1;
}
}@keyframes tip-flash {
	from {
	opacity:1;
}
50% {
	opacity:.1;
}
to {
	opacity:1;
}
}@keyframes display-loading-layer {
	from {
	height:0px;
}
to {
	height:90px;
}
}