css3动画 会动的背景图片

写一个登录注册页面 背景图类似于动图的动画(背景图中看着像云彩在移动)

.login_body{
    width: 100%;
    height: 100%;
    background: #1C77AC;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login_background{
    background: url(../image/background.png) no-repeat center;
    background-size: 100% 100%;
    height: 100%;
    width: 300%;
    animation: cloud_three 100s linear infinite;
    transform: translate3d(0,0,0);
    position: absolute;
    top: 0;
    left: 0;
}
@-webkit-keyframes cloud_three{
    0%{
        left:0
    }
    100%{
        left:-200%
    }
}
@-moz-keyframes cloud_three{
    0%{
        left:0
    }
    100%{
        left:-200%
    }
}
@keyframes cloud_three{
    0%{
        left:0
    }
    100%{
        left:-200%
    }
}
.login-wrap{
    right: 15%;
    margin: auto;
    width: 500px;
    height: auto;
    overflow: hidden;
    padding-bottom: 30px;
    text-align: center;
    background: #14547A;
    border-radius: 35px;
}

云彩图片资源 background.png(下面空白部分是云彩的透明度为0的云彩图)

css3动画 会动的背景图片_第1张图片
css3动画 会动的背景图片_第2张图片

你可能感兴趣的:(css3,动画,背景图片移动,css3,动画,背景图片移动)