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特效的资料请关注脚本之家其它相关文章！