@keyframes rotate {
	0% {
		transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
	}
	100% {
		transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
	}
}
.stars {
	transform: perspective(500px);
	transform-style: preserve-3d;
	position: absolute;
	bottom: 0;
	perspective-origin: 50% 100%;
	left: 50%;
	animation: rotate 90s infinite linear;
}
.star {
	width: 2px;
	height: 2px;
	background: #F7F7B6;
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0 -300px;
	transform: translate3d(0, 0, -300px);
	backface-visibility: hidden;
}

.meteor-list{ height: 0; width: 100%; position: relative; z-index: 100;}
.meteor-item {
    width: 156px;
    height: 103px; display:inline-block;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
    background: url(http://www.linkwin.com/templates/cn/images/liux.png) top no-repeat;
    -webkit-animation: meteoFlush 2.4s .12s linear infinite;
    animation: meteoFlush 2.4s .12s linear infinite;
    opacity:0;
}
.meteor-list .item--1 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s; left:23%;
}
.meteor-list .item--11 {
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;   left:0;
    position: absolute;
}

.meteor-list .item--2 {

    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s; left:50%;
}
.meteor-list .item--22 {
    -webkit-animation-delay: 1.3s;
    animation-delay: 2.3s;  left:70%;
    position: absolute;
    opacity:0;

}
.meteor-list .item--3 {
    -webkit-animation-delay: .8s;
    animation-delay: .8s;  left:55%;
}

.meteor-list .item--33 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s; right: -100px;
    position: absolute;
    opacity:0;
}

/*滑动流星*/

@-webkit-keyframes meteoFlush {
    0% {
        opacity:0;
        transform:scale(2) translate(160px, -105px)
    }
    25% {
        opacity:1
    }
    50%, 100% {
        opacity:0;
        transform:scale(0.5) translate(-160px, 105px)
    }
}
@keyframes meteoFlush {
    0% {
        opacity:0;
        transform:scale(2) translate(160px, -105px)
    }
    25% {
        opacity:1
    }
    50%, 100% {
        opacity:0;
        transform:scale(0.5) translate(-160px, 105px)
    }
}
@media screen and (max-width:767px){
    .meteor-item {
        width: 60px;
        height: 40px;
    }
}
.xg_banner_img {
	position: relative;
}
.xg_banner_img a img {
	animation:imageAnimation 8s infinite linear 0s alternate;
    -webkit-animation:imageAnimation 8s infinite linear 0s alternate;
}
.imageAnimation {
	-webkit-animation-name: imageAnimation;
	animation-name:imageAnimation;
}

@keyframes imageAnimation {
	0% {
		transform: scale(1.1);
		animation-timing-function: ease-in;
	}
	100% {
		transform: scale(1);
		animation-timing-function: ease-out;
	}
}
@-webkit-keyframes imageAnimation {
	0% {
		transform: scale(1.1);
		animation-timing-function: ease-in;
	}
	100% {
		transform: scale(1);
		animation-timing-function: ease-out;
	}
}