用css3实现的简单的云朵



  今天用css3和html实现了简单的cloud,主要运用box-shadow,border-radius技术;


html代码:


<div id = "cloud"><span class='shadow'></span></div>



css代码如下



*{ margin:0; padding:0;}
 body{ background:#ccc;}
 #cloud{ width:330px; height:120px; background:#f2f9fe; background:-webkit-linear-gradient(top,#f2f9f3 5%,#d6f0fd 100%);
 background:-moz-linear-gradient(top,#f2f9fe 5%,#d6f0fd 100%);
 background:-ms-linear-gradient(top,#f2f9fe 5%,#d6f0fd 100%);
 background:-o-linear-gradient(top,#f2f9fe 5%,#d6f0fd 100%);
 background:linear-gradient(top,#f2f9fe 5%,#d6f0fd 100%);
 border-radius:100px;
 position:relative;
 margin:120px auto 20px;
 }
 #cloud:after,#cloud:before{content:""; position:absolute; background:#f2f9fe; z-index:-1;}
 #cloud:after{ width:100px; height:100px; top:-50px; left:50px; border-radius:100px;}
 #cloud:before{ width:180px; height:180px; top:-90px; right:50px; border-radius:200px;}
 .shadow{ width:350px; position:absolute; bottom:-10px; background:#000; z-index:-1;
  box-shadow:0 0 25px 8px rgba(0,0,0,0.4);border-radius: 50%; -webkit-border-radius:50%;
 }


预览效果如下图,不支持ie8及以下的浏览器:




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端岚枫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值