【css】cssで絵を描きたい(4)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

【css】cssで絵を描きたい(4)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:33:31

オリジナル

924 人が閲覧しました

前回の【css】cssで絵を描きたい(3)に引き続き、今日は雲を2つ描き、Xiao Mingに友達を紹介しました。

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 }

ログイン後にコピー

ここでは、color sky も使用されていることが発見の 1 つです。青。

ここでの雲は、主にフィレット属性と位置属性を使用して、形状の異なる 4 つの円で構成されています。

描画を終えた後、理解を深めるために次の MDN の border-radius の詳細な紹介も確認しました。ここに MDN ドキュメントへのリンクがあります (内容が多く、冗長であると感じます)。繰り返しますが、誤解を招くのが心配なので、直接読んでください。ドキュメントの方が良いかもしれません):

https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius

非常に詳細を確認すると、以前に使用したものはまだ比較的浅いことがわかりました。

今日はここまでです、ご覧いただきありがとうございます。間違いがある場合は修正してください。

追記: 今回はコードペンのデモを削除しました。コードペンは複数の CSS ファイルのコードを毎回 1 つずつコピーする必要があり、さらに面倒だからです。ただし、読者がコードペンの方が優れていると思われる場合は、メッセージを残して私に知らせていただければ、再度追加します。