美文网首页
css3实现背景切换动画

css3实现背景切换动画

作者: Roadsun | 来源:发表于2017-12-06 14:24 被阅读0次
<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);
}

相关文章

网友评论

      本文标题:css3实现背景切换动画

      本文链接:https://www.haomeiwen.com/subject/ujgkixtx.html