用纯CSS画出蓝天白云（详细版）

在HTML5课上，老师要求我们提前学习如何用CSS画出蓝天白云并实现白云飘浮，在网上找了下，对着理解前辈们的代码消化了一下，故此记录下来。

目前，仅是实现了画出蓝天白云的效果图：

标题

HTML：

<div class="container">

        <div class="blueSky">

            <div class="cloud1"></div>

        <div class="cloud2"></div>

        </div>

        <div class="grassLand"></div>

    </div>

实现蓝天和白云的CSS：

.blueSky{

    width: 100%;

    height: 240px;

    background:

     -webkit-linear-gradient(top,rgb(196,228,253),rgb(255,255,255));

     background: -moz-linear-gradient(top,rgb(196,228,253),rgb(255,255,255));

     background: -o-linear-gradient(top,rgb(196,228,253),rgb(255,255,255));

     background: linear-gradient(top,rgb(196,228,253),rgb(255,255,255));

     position: relative;

}

.grassLand{

    width: 100%;

    height: 160px;

    background: 

    -webkit-linear-gradient(top,rgb(255,255,255),rgb(148,190,90));

    background: -moz-linear-gradient(top,rgb(255,255,255),rgb(148,190,90));

    background: -o-linear-gradient(top,rgb(255,255,255),rgb(148,190,90));

    background: linear-gradient(top,rgb(255,255,255),rgb(148,190,90));

 

}

这里解释一下：linear-gradient(),linear-gradient()就是实现线性渐变的一个效果，写了不同的前缀以兼容不同浏览器。（top,从上到下，实现从后面两个的颜色变化）

实现云朵的CSS:

.cloud1{

    width: 103px;

    height: 43px;

    background-color: #fff;

    border: azure 1px solid;

    border-radius: 50%;

    position: absolute;

    left: 40%;

    top: 20%;

}

.cloud1::after{

    content: '';

    height: 30px;

    width: 46px;

    background-color: #fff;

    border:azure 1px solid;

    border-radius: 50%;

    display: block;

    top: -8px;

    left: 48px;

}

.cloud1::before{

    content: '';

    height: 36px;

    width: 46px;

    background-color: #fff;

    border: #fff 1px solid;

    border-radius: 40%;

    display: block;

    position: absolute;

    top: 10px;

    left: 36px;

}

.cloud2{

    width: 200px;

    height: 30px;

    background-color: #fff;

    border: 1px solid #fff;

    border-radius: 50%;

    position: absolute;

    left: 70%;

    top:20%;

}

.cloud2:after{

    content: "";

    height: 29px;

    width: 86px;

    background-color: #fff;

    border: 1px solid #fff;

    border-radius: 50%;

    display: block;

    position: absolute;

    top: -8px;

    left: 48px;

}

.cloud2:before{

    content: "";

    height: 26px;

    width: 96px;

    background-color: #fff;

    border: 1px solid #fff;

    border-radius: 100%;

    display: block;

    position: absolute;

    top: 9px;

    left: 83px;

}

这里解释一下：：before和::after：

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

主要体验就是：不断动手操作，就会明白这是如何实现的。