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

 

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

 1 .human-pos-1 {
 2     left: 250px;
 3     bottom: 25px;
 4 }
 5 
 6 .human-pos-2 {
 7  40px;
 8  60px;
 9 }
10 
11 .human-legs-1 {
12     border: 3px solid #000;
13     border-bottom: none;
14     border-right:15     height:50px;
16  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如下:

.cloud{
 150px;
.cloud-pos {
 8 }
 9 
10 .cloud-pos-1 {
11  35%;
13 }
14 
15 .cloud-pos-2 {
 60%;
18 }
19 
20 .cloud-bg {
    background-color: skyBlue;
22 }
23 
24 .cloud-border {
25  2px solid #000;
26 }
27 
28 .cloud-top {
29     border-radius: 100%;
30     border-width: 0px;
31  100px;
32  50%;
33     margin-left:-75px;
34 35 }
36 
37 .cloud-left {
38 39  0px; 
40 41     margin-top: -50px;
42 43 44 }
45 
46 .cloud-right {    
47 48 49 50 51     right:0;
52 53 54 }
55 .cloud-bottom {    
56 57 58 59 53%;
60  -75px;
61 62  65%;
63 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看起来效果更好,可以留言告诉我,我再加回去。

 

相关文章

HTML代码中要想改变字体颜色,常常需要使用CSS样式表。CSS是...
HTML代码如何让字体盖住图片呢?需要使用CSS的position属性及...
HTML代码字体设置 在HTML中,我们可以使用标签来设置网页中的...
在网页设计中,HTML代码的字体和字号选择是非常重要的一个环...
HTML(Hypertext Markup Language,超文本标记语言)是一种用...
外链是指在一个网页中添加一个指向其他网站的链接,用户可以...