运用CSS3巧妙制作浮动云彩

2015-04-26 08:18  阅读 2,857 次 评论 8 条 已收录

细心的博友可能已经发现,轻微生活 网站LOGO位置多了一朵浮动的云彩,慢悠悠地来回游动,有一种悠闲自在的感觉!那么她是如何实现的呢?主要得归功于CSS3的一些神奇新属性!运用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

本文地址:http://humicai.cn/using-css-3-artfully-floating-clouds.html
关注我们:请关注一下我们的微信公众号:扫描二维码轻微生活的公众号,公众号:kivilife
版权声明:本文为原创文章,版权归 胡敉才 所有,欢迎分享本文,转载请保留出处!
PREVIOUS:已经是最后一篇了

发表评论


表情

  1. 刚哥笔记
    刚哥笔记 【铁杆粉丝】 @回复

    原来是这样,我以为是用hover效果呢。

  2. 懿古今
    懿古今 【中级粉丝】 @回复

    看起来真的很不错,太有才了

  3. Me.稀奇
    Me.稀奇 【铁杆粉丝】 @回复

    上面的浮动云真漂亮·····