css3实现背景切换动画

<body>
<div class="main">
    <div class="main-back">
    </div>
</div>
</body>

.main{
    -webkit-animation:background 10s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
    -webkit-animation-timing-function: ease-in-out;
    height: 100vh;
    width: 100%;
}
@-webkit-keyframes background
{
    from { background:url(img/one.jpg) no-repeat center;
    background-size: cover}
    to { background:url(img/two.jpg) no-repeat center ;
    background-size: cover}
}
/*加灰幕*/
.main-back{
    display: block;
    height: 100vh;
    width: 100%;
    background-color: rgba(85, 85, 85, 0.5);
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容