CSS3:实现图片轮播

最新推荐文章于 2024-01-27 01:20:09 发布

你好丶明天

最新推荐文章于 2024-01-27 01:20:09 发布

阅读量904

点赞数 1

分类专栏： CSS3 文章标签：图片 css3

本文链接：https://blog.csdn.net/qq592304796/article/details/52432993

版权

CSS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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