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

<div class="login_body">
		<div class="login_background"></div>
		<div class="login-wrap">
			<h1 class="login-title">评测管理员</h1>
			<div class="login-type-wrap">
				<router-link to="/login" class="logintype">登录</router-link>
				<router-link to="/registered" class="logintype">注册</router-link>
			</div>
			<router-view></router-view>
		</div>
	</div>

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

转载自原文链接, 如需删除请联系管理员。

原文链接：css3动画 会动的背景图片，转载请注明来源！