[css]我要用css画幅画(四)

接着之前的[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如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Css Paint</title>
 6     <link rel="stylesheet" type="text/css" href="../css/sun.css" />
 7     <link rel="stylesheet" type="text/css" href="../css/house.css" />
 8     <link rel="stylesheet" type="text/css" href="../css/human.css" />
 9     <link rel="stylesheet" type="text/css" href="../css/cloud.css" />
10 </head>
11 <body>
12     <div class="sun">
13         <div class="sun-body"></div>
14         <div class="sun-shine-light sun-shine-light1"></div>
15         <div class="sun-shine-light sun-shine-light2"></div>
16         <div class="sun-shine-light sun-shine-light3"></div>
17         <div class="sun-shine-light sun-shine-light4"></div>
18         <div class="sun-shine-light sun-shine-light5"></div>
19     </div>
20 
21     <div class="house-width house">
22         <div class="house-width house-roof house-roof-left"></div>
23         <div class="house-width house-roof house-roof-right"></div>
24         <div class="house-width house-wall">
25             
26             <div class="house-wall-door">
27                 
28                 <div class="house-wall-door-handle"></div>
29             </div>
30         </div>
31     </div>
32 
33     <div class="human human-pos-1">
34         <p class="lines">大家好，我叫小明</p>
35         <div class="human-head-normal"></div>
36         <div class="human-body-normal"></div>
37         <div class="human-arms-normal"></div>
38         <div class="human-legs-normal"></div>
39     </div>
40 
41     <div class="human human-pos-2">
42         <p class="lines">大家好，我叫静静</p>
43         <div class="human-head-normal"></div>
44         <div class="human-body-normal"></div>
45         <div class="human-arms-normal"></div>
46         <div class="human-legs-1"></div>
47     </div>
48 
49     <div class="cloud cloud-pos cloud-pos-1">
50         <div class="cloud-pos cloud-border cloud-bg cloud-top"></div>
51         <div class="cloud-pos cloud-border cloud-bg cloud-left"></div>
52         <div class="cloud-pos cloud-border cloud-bg cloud-right"></div>
53         <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>
54     </div>
55     <div class="cloud cloud-pos cloud-pos-2">
56         <div class="cloud-pos cloud-border cloud-bg cloud-top"></div>
57         <div class="cloud-pos cloud-border cloud-bg cloud-left"></div>
58         <div class="cloud-pos cloud-border cloud-bg cloud-right"></div>
59         <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>
60     </div>
61 
62 
63 </body>
64 </html>
Html

 

本次对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 }
human.css改动

 

云的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 }
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看起来效果更好，可以留言告诉我，我再加回去。

 

posted on 2015-11-16 23:36  bee0060  阅读(1218)  评论(2)  编辑  收藏  举报

导航