接着之前的[css]我要用css画幅画(三)， 今天，我画了两朵云，并给小明介绍了个朋友：静静。
github：https://github.com/bee0060/Css-Paint ， 完整代码在pages/sun-house-4.html和相关的css中可以找到
demo： http://bee0060.github.io/Css-Paint/pages/sun-house/sun-house-4.html
完整html如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css Paint</title>
<link rel="stylesheet" type="text/css" href="../css/sun.css" />
<link rel="stylesheet" type="text/css" href="../css/house.css" />
<link rel="stylesheet" type="text/css" href="../css/human.css" />
<link rel="stylesheet" type="text/css" href="../css/cloud.css" />
</head>
<body>
<div class="sun">
<div class="sun-body"></div>
<div class="sun-shine-light sun-shine-light1"></div>
<div class="sun-shine-light sun-shine-light2"></div>
<div class="sun-shine-light sun-shine-light3"></div>
<div class="sun-shine-light sun-shine-light4"></div>
<div class="sun-shine-light sun-shine-light5"></div>
</div> <div class="house-width house">
<div class="house-width house-roof house-roof-left"></div>
<div class="house-width house-roof house-roof-right"></div>
<div class="house-width house-wall"> <div class="house-wall-door"> <div class="house-wall-door-handle"></div>
</div>
</div>
</div> <div class="human human-pos-1">
<p class="lines">大家好，我叫小明</p>
<div class="human-head-normal"></div>
<div class="human-body-normal"></div>
<div class="human-arms-normal"></div>
<div class="human-legs-normal"></div>
</div> <div class="human human-pos-2">
<p class="lines">大家好，我叫静静</p>
<div class="human-head-normal"></div>
<div class="human-body-normal"></div>
<div class="human-arms-normal"></div>
<div class="human-legs-1"></div>
</div> <div class="cloud cloud-pos cloud-pos-1">
<div class="cloud-pos cloud-border cloud-bg cloud-top"></div>
<div class="cloud-pos cloud-border cloud-bg cloud-left"></div>
<div class="cloud-pos cloud-border cloud-bg cloud-right"></div>
<div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>
</div>
<div class="cloud cloud-pos cloud-pos-2">
<div class="cloud-pos cloud-border cloud-bg cloud-top"></div>
<div class="cloud-pos cloud-border cloud-bg cloud-left"></div>
<div class="cloud-pos cloud-border cloud-bg cloud-right"></div>
<div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>
</div> </body>
</html>
Html
本次对human.css做了一些改动，主要增加了如下内容：
.human-pos-1 {
left: 250px;
bottom: 25px;
}
.human-pos-2 {
left: 40px;
bottom: 60px;
}
.human-legs-1 {
border: 3px solid #000;
border-bottom: none;
border-right: none;
height:50px;
left: 55px;
position: absolute;
top: 120px;
width: 50px;
-webkit-transform: rotate(-2deg);
-webkit-transform-origin: 1px 1px;
}
human.css改动
云的css如下：
.cloud{
height: 150px;
width: 250px;
}
.cloud-pos {
position: absolute;
}
.cloud-pos-1 {
left: 35%;
top: 25px;
}
.cloud-pos-2 {
left: 60%;
top: 25px;
}
.cloud-bg {
background-color: skyBlue;
}
.cloud-border {
border: 2px solid #000;
}
.cloud-top {
border-radius: 100%;
border-width: 0px;
height: 100px;
left: 50%;
margin-left:-75px;
width: 150px;
}
.cloud-left {
border-radius: 100%;
border-width: 0px;
height: 100px;
margin-top: -50px;
top: 60%;
width: 100px;
}
.cloud-right {
border-radius: 100%;
border-width: 0px;
height: 100px;
margin-top: -50px;
right:;
top: 60%;
width: 100px;
}
.cloud-bottom {
border-radius: 100%;
border-width: 0px;
height: 100px;
left:53%;
margin-left: -75px;
margin-top: -50px;
top: 65%;
width: 150px;
}
cloud.css
这里并没有用到什么陌生的css，一个发现是，原来还有skyBlue这个颜色。
这里的云是由四个形状不一的圆组成， 主要用了圆角属性和位置属性。
在画完后，也特意查了以下MDN中border-radius的详细介绍，加深了解，这里奉上MDN的文档链接（内容较多，再转述觉得多余，也担心造成误导，直接看文档可能更好）：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius
非常详细，发现自己以前用的还是比较浅的。
今天就到这，谢谢观看。 如有错误，欢迎指正。
PS: 这次去掉了code pen的demo，因为code pen每次都要把多个css文件中的代码逐个复制进去，比较麻烦。 但如果看官觉得有code pen看起来效果更好，可以留言告诉我，我再加回去。