运用CSS3巧妙制作浮动云彩

细心的博友可能已经发现，轻微生活 网站LOGO位置多了一朵浮动的云彩，慢悠悠地来回游动，有一种悠闲自在的感觉！那么她是如何实现的呢？主要得归功于CSS3的一些神奇新属性！

其实这个浮云效果是小编在瞎逛博客圈时无意间发现的，第一时间就觉得创意不错，就应用到了自己的网站上来，这里也分享给大家。该创意来自于Abel's blog，代码很简单，就是运用CSS3 的一些特性，画出三个圆形和一个矩形，组合成一朵云的形状，加上动画效果，让它左右移动，形成一个飘动的效果～

首先，您需要在网站待显示位置贴上如下的HTML代码：

<!-- Cloud HTML -->
<div id="cloud">
<div class="one">大圆</div>
<div class="two">中圆</div>
<div class="thr">小圆</div>
<div class="fou">矩形</div>
</div>

然后，您需要在网站引用的样式表里添加如下CSS代码：

/* Cloud CSS */
#cloud {
margin-left:50px;
width:250px;
height:150px;
position:relative;
-webkit-animation:'cloud' 5s linear infinite;
}

#cloud * {
position:absolute;
background:#FFF;
border-radius:50%;
box-shadow:0px 5px 0px #6695B0;
text-indent:-99999px;
}

#cloud .one {
left:60px;
top:30px;
width:128px;
height:128px;
}

#cloud .two {
left:20px;
top:76px;
width:82px;
height:82px;
}

#cloud .thr {
left:155px;
top:94px;
width:64px;
height:64px;
}

#cloud .fou {
left:56px;
top:118px;
width:135px;
height:40px;
border-radius:0;
}

@-webkit-keyframes cloud {
0% { margin-left:50px;}
50% { margin-left:150px; }
100% { margin-left:50px; }
}

如此简单两步便已大功告成，效果如本站LOGO右下方浮云效果，

当然您也可以去原作者Abel Yao的浮云专属站点查看：forcloud.net