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

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

很久没有更新过素材了，今天给大家分享一个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中的图片路径

云层图片下载：
**** Hidden Message *****

技术帮助 发表于 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
页: [1]
查看完整版本: HTML5+CSS3实现循环飘动的云朵