html5 css3蓝天白云,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;

}