Css3画蓝天白云

• 云的画法:一个圆形和两个长方形

---

蓝天白云.png

/*清除元素默认边距*/

* {
    margin: 0;
    padding: 0;
}


/*蓝天草地全屏显示,二者高度比为6:4*/

.world {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgb(196, 228, 253)), color-stop(0.6, rgb(255, 255, 255)), to(rgb(148, 190, 89)));
    background: -webkit-linear-gradient(rgb(196, 228, 253), rgb(255, 255, 255) 60%, rgb(148, 190, 89));
    background: -moz-linear-gradient(rgb(196, 228, 253), rgb(255, 255, 255) 60%, rgb(148, 190, 89));
    background: -o-linear-gradient(rgb(196, 228, 253), rgb(255, 255, 255) 60%, rgb(148, 190, 89));
    background: linear-gradient(rgb(196, 228, 253), rgb(255, 255, 255) 60%, rgb(148, 190, 89));
}


/*利用边框绘制云彩,一个圆形,两个长方形*/

.cloud,
.cloud::before,
.cloud::after {
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 100px;
    box-shadow: 0px 0px 2px 2px #fff;
}

.cloud {
    border: 50px solid #fff;
}

.cloud::before {
    content: "";
    border: 30px solid #fff;
    padding-left: 20px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -12px;
    left: -90px;
}

.cloud::after {
    content: "";
    border: 24px solid #fff;
    padding-left: 110px;
    top: -4px;
    left: -96px;
}


/*设置云彩大小,在天空中的位置,观察原图有三朵云大小基本一样,取奇数减少代码量*/

.cloud:nth-child(odd) {
    -webkit-transform: scale(.7);
    -moz-transform: scale(.7);
    -ms-transform: scale(.7);
    -o-transform: scale(.7);
    transform: scale(.7);
}

.cloud:nth-child(1) {
    top: 1vh;
    left: 40vw;
}

.cloud:nth-child(3) {
    top: 20vh;
    left: 45vw;
}

.cloud:nth-child(2) {
    top: 10vh;
    left: 55vw;
}

.cloud:nth-child(4) {
    top: 15vh;
    left: 65vw;
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -ms-transform: scale(.5);
    -o-transform: scale(.5);
    transform: scale(.5);
}

.cloud:nth-child(5) {
    top: 3vh;
    left: 75vw;
}