css3实现简单的白云飘动背景特效

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

HT ML 结构

该白云飘动特效的HTML结果非常简单，使用一个<div>来包裹一组作为白云的<div>元素。

<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>

CSS样式

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

.cloud {
width: 200px; h ei ght: 60px;
background:  # fff;
border-radius: 200px;
-moz-border-radius: 200px;
- webkit -border-radius: 200px;
pos IT ion: 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 -t ransform: rotate(30 deg );
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  PR oportional to the size*/
/*S PE ed 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-keyfr am es moveclouds {
0% {m arg in-left: 1000px;}
100% {mar gin -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特效的资料请关注其它相关 文章 ！

总结

以上是 为你收集整理的 css3实现简单的白云飘动背景特效 全部内容，希望文章能够帮你解决 css3实现简单的白云飘动背景特效 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于css3实现简单的白云飘动背景特效的详细内容...