HTML5+CSS3实现循环飘动的云朵

技术帮助 · 发表于 2016-10-13 17:09:33

很久没有更新过素材了，今天给大家分享一个html5+css的现循环飘动的云朵案例素材，希望多各位站长有所帮助

效果展示：

HTML代码部分

<div class="warp">
<div id="clouds">
<div class="cloud cloud-1"></div>
<div class="cloud cloud-2"></div>
<div class="cloud cloud-3"></div>
<div class="cloud cloud-4"></div>
<div class="cloud cloud-5"></div>
<div class="cloud cloud-6"></div>
</div>
</div>

复制代码

CSS代码部分

/*云层动画*/
@-webkit-keyframes moveclouds {
from {
margin-left: -200px
}
to {
margin-left: 2200px
}
}
@-moz-keyframes moveclouds {
from {
margin-left: -200px
}
to {
margin-left: 2200px
}
}
@-o-keyframes moveclouds {
from {
margin-left: -200px
}
to {
margin-left: 2200px
}
}
@keyframes moveclouds {
from {
margin-left: -200px
}
to {
margin-left: 2200px
}
}

复制代码

CSS代码：云层样式

/*云*/
.cloud {
position: absolute;
}
.cloud-1 {
top: 60px;
left: -100px;
width: 98px;
height: 36px;
background: url(../images/cloud-1.png);
-webkit-animation: moveclouds 145s infinite linear;
-moz-animation: moveclouds 145s infinite linear;
-o-animation: moveclouds 145s infinite linear;
animation: moveclouds 145s infinite linear;
}
.cloud-2 {
top: 170px;
left: -420px;
width: 91px;
height: 35px;
background: url(../images/cloud-2.png);
-webkit-animation: moveclouds 135s infinite linear;
-moz-animation: moveclouds 135s infinite linear;
-o-animation: moveclouds 135s infinite linear;
animation: moveclouds 135s infinite linear;
}
.cloud-3 {
top: 140px;
left: -380px;
width: 88px;
height: 34px;
background: url(../images/cloud-3.png);
-webkit-animation: moveclouds 38s infinite linear;
-moz-animation: moveclouds 38s infinite linear;
-o-animation: moveclouds 38s infinite linear;
animation: moveclouds 38s infinite linear;
}
.cloud-4 {
top: 120px;
left: -300px;
width: 135px;
height: 53px;
background: url(../images/cloud-4.png);
-webkit-animation: moveclouds 103s infinite linear;
-moz-animation: moveclouds 103s infinite linear;
-o-animation: moveclouds 103s infinite linear;
animation: moveclouds 103s infinite linear;
}
.cloud-5 {
top: 230px;
left: -200px;
width: 100px;
height: 40px;
background: url(../images/cloud-5.png);
-webkit-animation: moveclouds 65s infinite linear;
-moz-animation: moveclouds 65s infinite linear;
-o-animation: moveclouds 65s infinite linear;
animation: moveclouds 65s infinite linear;
}
.cloud-6 {
top: 40px;
left: -180px;
width: 141px;
height: 39px;
background: url(../images/cloud-6.png);
-webkit-animation: moveclouds 30s infinite linear;
-moz-animation: moveclouds 30s infinite linear;
-o-animation: moveclouds 30s infinite linear;
animation: moveclouds 30s infinite linear;
}

复制代码

使用时注意云层CSS中的图片路径

云层图片下载：

游客，如果您要查看本帖隐藏内容请回复

技术帮助 · 发表于 2016-10-18 15:03:00

需要的同学可以试试！

聊仁 · 发表于 2017-3-18 12:22:42

学习了，谢谢分享！

qq936967462 · 发表于 2017-3-21 19:45:16

谢谢分享！！！！

qq1765334669 · 发表于 2018-5-1 07:30:10

66666666666666666

djntt · 发表于 2018-9-19 11:01:36

666666666666666666

chuanshang · 发表于 2018-11-21 19:02:19

666666666666

		自动登录	找回密码
密码			立即注册