Css3画蓝天白云
2017-11-11 本文已影响0人
留白的未来
- 云的画法:一个圆形和两个长方形
蓝天白云.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;
}
