html白云飘动效果特效代码,css3实现简单的白云飘动背景特效

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

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