首頁 > web前端 > html教學 > [css]我要用css画幅画(四)_html/css_WEB-ITnose

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

WBOY
發布: 2016-06-24 11:33:31
原創
924 人瀏覽過

接着之前的[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 <!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>
登入後複製

本次对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看起来效果更好,可以留言告诉我,我再加回去。

 

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板