纯CSS3实现的蓝天白云效果

纯CSS3实现的蓝天白云效果

今天我使用了CSS3新增的属性border-radius、linear-gradient、scale(缩放)和一些布局技巧实现了蓝天白云的效果。其HTML结构如下：

<div class="container">
<div class="blueSky">
<div class="cloud1"></div>
<div class="cloud2"></div>
<div class="cloud3"></div>
<div class="cloud4"></div>
<div class="cloud5"></div>
</div>
<div class="grassLand"></div>
</div>

实现蓝天的CSS样式：

.blueSky{
width: 100%;
height: 240px;
background-image: -webkit-linear-gradient(top,rgb(196,228,253),rgb(255,255,255));
position: relative;
}

实现草原的CSS样式：

.grassLand{
width: 100%;
height: 160px;
background-image: -webkit-linear-gradient(top,rgb(255,255,255),rgb(148, 190, 89));
}

实现云朵的CSS样式：

.cloud1{
width: 103px;
height: 30px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 50%;
position: absolute;
left: 40%;
top:10%;
}
.cloud1:after{
content: "";
height: 29px;
width: 46px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 50%;
display: block;
position: absolute;
top: -8px;
left: 48px;

}
.cloud1:before{
content: "";
height: 36px;
width: 46px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 50%;
display: block;
position: absolute;
top: -5px;
left: 13px;
}

程序的运行结果如下：



怎么样？CSS3是不是很有趣啊，大家赶紧尝试一下吧。