Css3画蓝天白云

作者: 留白的未来 | 来源:发表于2017-11-11 17:30 被阅读0次

Css3画蓝天白云
各种纯css图标
成都分院第143期：如何用css绘制一些常见图形
css3开发商务滑动垂直侧边栏
你画我猜
css3画国旗
CSS3 画形状
网页高级知识点（三）
秋摹
乌木

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

蓝天白云.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>蓝天白云</title>
        <link rel="stylesheet" type="text/css" href="css/cloud.css"/>
    </head>
    <body>
        <div class="world">
            <div class="cloud"></div>
            <div class="cloud"></div>
            <div class="cloud"></div>
            <div class="cloud"></div>
            <div class="cloud"></div>
        </div>
    </body>
</html>

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

* {
    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;
}