纯CSS3白云飘动背景特效源码，给网页配上美丽的外套！

左手的ㄟ右手 2022-04-10 04:10 405阅读 0赞

这是一款非常简单的纯CSS3白云飘动背景特效。该白云飘动特效使用CSS animation动画来控制不同的白云，以不同的速度进行运动，形成白云飘动的效果。

![纯CSS3白云飘动背景特效源码，给网页配上美丽的外套！][CSS3]

简单的纯CSS3白云飘动背景特效

# HTML结构 #

该白云飘动特效的HTML结果非常简单，使用一个

来包裹一组作为白云的

元素。

# CSS样式 #

白云使用.cloud 和它的:before和:after伪元素来制作。

.cloud {
    width: 200px; height: 60px;
    background: #fff;
    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;
    position: relative;
    }
    .cloud:before, .cloud:after {
    content: '';
    position: absolute;
    background: #fff;
    width: 100px; height: 80px;
    position: absolute; top: -15px; left: 10px;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    }
    .cloud:after {
    width: 120px; height: 120px;
    top: -55px; left: auto; right: 15px;
    }

每一朵白云都执行moveclouds动画，但是它们的动画速度各不相同。大小和透明度也各不相同。

.x1 {
    -webkit-animation: moveclouds 15s linear infinite;
    -moz-animation: moveclouds 15s linear infinite;
    -o-animation: moveclouds 15s linear infinite;
    }
    .x2 {
    left: 200px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.6; /*opacity proportional to the size*/
    /*Speed will also be proportional to the size and opacity*/
    /*More the speed. Less the time in 's' = seconds*/
    -webkit-animation: moveclouds 25s linear infinite;
    -moz-animation: moveclouds 25s linear infinite;
    -o-animation: moveclouds 25s linear infinite;
    }
    ......
    @-webkit-keyframes moveclouds {
    0% {margin-left: 1000px;}
    100% {margin-left: -1000px;}
    }
    @-moz-keyframes moveclouds {
    0% {margin-left: 1000px;}
    100% {margin-left: -1000px;}
    }
    @-o-keyframes moveclouds {
    0% {margin-left: 1000px;}
    100% {margin-left: -1000px;}
    }

![纯CSS3白云飘动背景特效源码，给网页配上美丽的外套！][CSS3 1]

自己整理了一份2018最全面前端学习资料,从最基础的HTML+CSS+JS \[炫酷特效，游戏，插件封装，设计模式\]到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴, 有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。

>   
> 加Q Q群：956940552（招募中）

[CSS3]: /images/20220403/f0d055639b4a43e3940cfb3eb4ef8946.png
[CSS3 1]: /images/20220403/148549e0be1049f6b5e1a3215929713b.png