移动的白云

最新推荐文章于 2021-07-14 11:18:36 发布

'马赛克'

最新推荐文章于 2021-07-14 11:18:36 发布

阅读量595

点赞数 3

分类专栏：技术文献文章标签：无限运动的云雾纯css实现云雾运动

本文链接：https://blog.csdn.net/weixin_44540436/article/details/88788478

版权

技术文献专栏收录该内容

30 篇文章 0 订阅

订阅专栏

无限运动的云雾
1、页面搭建HTML代码如下：

<div class="sky">/*背景盒子*/
    <div class="clouds_one"></div>/*第一张相片*/
    <div class="clouds_two"></div>/*第二张相片*/
    <div class="clouds_three"></div>/*第三张相片*/
</div>

2、背景的设置代码如下：

 html, body {
    margin: 0;padding: 0;height: 100%;
}
.sky {
    height: 100%;background: #007fd5;
    position: relative;overflow: hidden; /*超出隐藏*/
}

3、第一张相片设置的代码

.sky .clouds_one {
	background: url('../../Content/yunwu/images/cloud_one.png');
	background-size: 46% 84%;
	position: absolute;left: 0;top: 0; height: 100%;width: 300%;
	/*浏览器兼容性代码*/
	-webkit-animation: cloud_one 50s linear infinite;
	-moz-animation: cloud_one 50s linear infinite;
	-o-animation: cloud_one 50s linear infinite;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	animation: cloud_one 50s linear infinite;
 }
@keyframes cloud_one {
    0% {left: 0;}
    100% {left: -138%;}
}
浏览器兼容性
@-webkit-keyframes cloud_one {
    0% {left: 0;}
    100% {left: -138%;}
}
浏览器兼容性
@-moz-keyframes cloud_one {
    0% {left: 0;}
    100% {left: -138%;}
}

4、第二张相片的设置

.sky .clouds_two {
    background: url('../../Content/yunwu/images/cloud_two.png');
    background-size: 46% 84%;
    position: absolute;left: 0;top: 0;height: 100%;width: 370%;
    /*浏览器兼容性代码*/
    -webkit-animation: cloud_two 80s linear infinite;
    -moz-animation: cloud_two 80s linear infinite;
    -o-animation: cloud_two 80s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    animation: cloud_two 80s linear infinite;
}
@keyframes cloud_two {
    0% {left: 0;}
    100% {left: -170%;}
}
浏览器兼容性
@-webkit-keyframes cloud_two {
    0% left: 0;}
    100% {left: -170%;}
}
浏览器兼容性
@-moz-keyframes cloud_two {
    0% {left: 0;}
    100% {left: -170%;}
}

5、第三张相片的设置

.sky .clouds_three {
    background-image: url('../../Content/yunwu/images/cloud_three.png');
    background-size: 50% 84%;
    position: absolute;left: 0;top: 0;height: 100%;width: 300%;
    /*浏览器兼容性代码*/
    -webkit-animation: cloud_three 130s linear infinite;
    -moz-animation: cloud_three 130s linear infinite;
    -o-animation: cloud_three 130s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    animation: cloud_three 130s linear infinite;
}
@keyframes cloud_three {
    0% { left: 0;}
    100% {left: -150%;}
}
浏览器兼容性
@-webkit-keyframes cloud_three {
    0% {left: 0;}
    100% {left: -150%;}
}
浏览器兼容性
@-moz-keyframes cloud_three {
    0% {left: 0;}
    100% {left: -150%;}
}