[css]我要用css画幅画(四)_html/css_WEB-ITnose

接着之前的[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-4.html

完整html如下：

 1  2  3  4      5      6      7      8      9     10 11 12     
13         14         15         16         17         18         19     
20 21     
22         23         24         
25             26             
27                 28                 29             
30         
31     
32 33     
34         
大家好，我叫小明
35         36         37         38         39     
40 41     
42         
大家好，我叫静静
43         44         45         46         47     
48 49     
50         51         52         53         54     
55     
56         57         58         59         60     
61 62 63 64 

本次对human.css做了一些改动，主要增加了如下内容：

 1 .human-pos-1 { 2     left: 250px; 3     bottom: 25px; 4 } 5  6 .human-pos-2 { 7     left: 40px; 8     bottom: 60px; 9 }10 11 .human-legs-1 {12     border: 3px solid #000;13     border-bottom: none;14     border-right: none;15     height:50px;16     left: 55px;17     position: absolute;18     top: 120px;19     width: 50px;20     21     -webkit-transform: rotate(-2deg);22     -webkit-transform-origin: 1px 1px;23 }

云的css如下：

 1 .cloud{ 2     height: 150px; 3     width: 250px; 4 } 5  6 .cloud-pos { 7     position: absolute; 8 } 9 10 .cloud-pos-1 {11     left: 35%;12     top: 25px;13 }14 15 .cloud-pos-2 {16     left: 60%;17     top: 25px;18 }19 20 .cloud-bg {21     background-color: skyBlue;22 }23 24 .cloud-border {25     border: 2px solid #000;26 }27 28 .cloud-top {29     border-radius: 100%;30     border-width: 0px;31     height: 100px;32     left: 50%;33     margin-left:-75px;34     width: 150px;35 }36 37 .cloud-left {38     border-radius: 100%;39     border-width: 0px; 40     height: 100px;41     margin-top: -50px;42     top: 60%;43     width: 100px;44 }45 46 .cloud-right {    47     border-radius: 100%;48     border-width: 0px; 49     height: 100px;50     margin-top: -50px;51     right:0;52     top: 60%;53     width: 100px;54 }55 .cloud-bottom {    56     border-radius: 100%;57     border-width: 0px; 58     height: 100px;59     left:53%;60     margin-left: -75px;61     margin-top: -50px;62     top: 65%;63     width: 150px;64 }

这里并没有用到什么陌生的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看起来效果更好，可以留言告诉我，我再加回去。