ホームページ > 記事 > ウェブフロントエンド > 【css】cssで絵を描きたい(4)_html/css_WEB-ITnose
【css】cssで絵を描きたい(4)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:33:31910ブラウズ
前回の【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 つずつコピーする必要があり、さらに面倒だからです。 ただし、読者がコード ペンの方が優れていると思われる場合は、メッセージを残して私に知らせていただければ、再度追加します。