1. 程式人生 > >CSS3:實現圖片輪播

CSS3:實現圖片輪播

/**
	login頁面圖片切換
*/
@-webkit-keyframes slide {
	0% {
        background-image: url(../images/background/login_background1.jpg);
    }
	10%, 25% {
		background-image: url(../images/background/login_background2.jpg);
	}
	35%, 50% {
		background-image: url(../images/background/login_background3.jpg);
	}
	60%, 75% {
		background-image: url(../images/background/login_background4.jpg);
	}
    85%, 100% {
        background-image: url(../images/background/login_background1.jpg);
    }
}
@-moz-keyframes slide {
    0% {
        background-image: url(../images/background/login_background1.jpg);
    }
	10%, 25% {
		background-image: url(../images/background/login_background2.jpg);
	}
	35%, 50% {
		background-image: url(../images/background/login_background3.jpg);
	}
	60%, 75% {
		background-image: url(../images/background/login_background4.jpg);
	}
    85%, 100% {
        background-image: url(../images/background/login_background1.jpg);
    }
}
@-o-keyframes slide {
	0% {
	    background-image: url(../images/background/login_background1.jpg);
	}
	100% {
	    background-image: url(../images/background/login_background1.jpg);
	}
}
@keyframes slide {
    0% {
        background-image: url(../images/background/login_background1.jpg);
    }
	10%, 25% {
		background-image: url(../images/background/login_background2.jpg);
	}
	35%, 50% {
		background-image: url(../images/background/login_background3.jpg);
	}
	60%, 75% {
		background-image: url(../images/background/login_background4.jpg);
	}
    85%, 100% {
        background-image: url(../images/background/login_background1.jpg);
    }
}
#login-full-wrapper {
     background: url(../images/background/login_background1.jpg) no-repeat center center;
     background-size: cover;
     width: 100%;
     height: 100%;
     position: absolute;
    -webkit-animation: slide 8s linear infinite;
    -o-animation: slide 8s linear infinite;
    animation: slide 8s linear infinite;
}