ホームページ >ウェブフロントエンド >htmlチュートリアル >【css】cssで絵を描きたい(2)_html/css_WEB-ITnose
【css】cssで絵を描きたい(2)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:33:531206ブラウズ
前回の【CSS】CSSで絵を描きたい(1)に引き続き、今日は屋根と壁とドアのあるとてもシンプルな家を描きます。
今後、エフェクトは chrome とのみ互換性があるため、次の css3 属性には -webkit- プレフィックスのみが含まれる場合があります。 趣味で描いているだけなのに、互換性を気にする必要はありませんよね？
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 </head> 9 <body>10 <div class="sun">11 <div class="sun-body"></div>12 <div class="sun-shine-light sun-shine-light1"></div>13 <div class="sun-shine-light sun-shine-light2"></div>14 <div class="sun-shine-light sun-shine-light3"></div>15 <div class="sun-shine-light sun-shine-light4"></div>16 <div class="sun-shine-light sun-shine-light5"></div>17 </div>18 19 <div class="house-width house">20 <div class="house-width house-roof house-roof-left"></div>21 <div class="house-width house-roof house-roof-right"></div>22 <div class="house-width house-wall">23 24 <div class="house-wall-door">25 26 <div class="house-wall-door-handle"></div>27 </div>28 </div>29 </div>30 </body>31 </html>
cssは次のとおりです:
(original sun.css)
1 .sun{ 2 position: relative; 3 } 4 5 .sun-body{ 6 background-color: red; 7 border-radius: 50%; 8 height: 300px; 9 left: -100px;10 position: absolute;11 top: -100px;12 width: 300px;13 z-index: 9;14 }15 .sun-shine-light{16 background-color: yellow;17 height: 5px;18 left:250px;19 margin-top:30px;20 position: relative;21 width: 300px;22 z-index:10;23 }24 .sun-shine-light1{25 -webkit-transform: rotate(-3deg);26 -moz-webkit-transform: rotate(-3deg);27 -ms-webkit-transform: rotate(-3deg);28 -o-webkit-transform: rotate(-3deg);29 }30 .sun-shine-light2{31 top: 70px;32 left: 240px;33 -webkit-transform: rotate(10deg);34 -moz-webkit-transform: rotate(10deg);35 -ms-webkit-transform: rotate(10deg);36 -o-webkit-transform: rotate(10deg);37 }38 .sun-shine-light3{39 top: 160px;40 left: 195px;41 -webkit-transform: rotate(30deg);42 -ms-transform: rotate(30deg);43 -o-transform: rotate(30deg);44 transform: rotate(30deg);45 }46 .sun-shine-light4{47 top: 215px;48 left: 85px; 49 width: 260px;50 -webkit-transform: rotate(55deg);51 -ms-transform: rotate(55deg);52 -o-transform: rotate(55deg);53 transform: rotate(55deg);54 }55 .sun-shine-light5{56 top: 200px;57 left: -50px;58 width: 230px;59 -webkit-transform: rotate(85deg);60 -ms-transform: rotate(85deg);61 -o-transform: rotate(85deg);62 transform: rotate(85deg);63 } (新たに追加された house.css)
1 .house-width { 2 width: 600px; 3 } 4 5 .house { 6 bottom: 20px; 7 height: 400px; 8 left: 600px; 9 position: absolute;10 }11 12 .house-roof {13 background: gold;14 border: 3px solid #000;15 left: -30px;16 height: 180px;17 position: relative;18 }19 20 .house-roof-left {21 border-left-width: 15px;22 float: left;23 -webkit-transform: matrix(0.25, 0, -0.4, 1, -298, 0);24 }25 26 .house-roof-right {27 -webkit-transform: matrix(1, 0, 0.3, 1, 0, 0);28 }29 30 .house-wall {31 border: 2px solid #000;32 height: 220px;33 }34 .house-wall::before{35 border: 2px solid #000;36 height: 220px;37 width:130px;38 content:'';39 left: -133px;40 top: 186px;41 position: absolute;42 display: block;43 }44 45 .house-wall-door {46 background: orange;47 bottom: 0px;48 height: 180px;49 left: 110px;50 position: absolute;51 width: 110px;52 }53 54 .house-wall-door-handle {55 background: brown;56 border: 1px solid #000;57 border-radius: 50%;58 height: 15px;59 position: absolute;60 right: 10px;61 top: 90px;62 width:15px;63 }
以下はコード ペンでの効果です: 太陽と家
ここでは次の見慣れない CSS が使用されています:
-webkit-transform:matrix(1, 0, 0.3, 1, 0, 0); (私はChromeのみと互換性があるため、ここには-webkitプレフィックスがあります。FIREFOXで使用したい場合は、-moz-プレフィックスに変更してください)
matrix、屋根、マトリックスをペイントするときに使用します長方形を描画するために使用されます。
行列の MDN ドキュメントはここにあります: https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
さらに、ここでさまざまなパラメーターの下でこの属性のパフォーマンスをテストできます: http://www.css88.com/tool/css3Preview/Transform-Matrix.html
matrix は 6 つのパラメータを受け入れます。これらの 6 つのパラメータはすべて正と負の小数を受け入れます:
1 幅の変換率を示します。 , 1 は 100%、つまり変更されないことを意味します。 0.25 は元の値の 25% のみを意味します。
2 は原点から時計回りに回転した値を意味します。 よくわかりませんが、私の推測では次のようになります。この値は回転角度の正接関数の値です。つまり、tan45 = 1 であるため、1 を入力すると時計回りに 45 度回転します。または回転の傾きとも呼ばれます。3. 原点を基準とした左上の傾き変形と右下の傾き変形の値を表します。この値は2番目のパラメータと同様に傾き変形の傾きとなると思います。 値が大きいほど傾き変形が大きくなります。
4. 高さの縮退率を示します。1 は 100%、つまり変更されていないことを意味します。0.25 は、横方向の変位のピクセル値を示します。このパラメーターは数値のみを受け入れます。単位 (px) を入力する必要はありません。 100と書くと100px左に移動します。 負の数を入力することもできます
6. 縦方向の変位を表すピクセル値。その他は上記と同じです
上記の「原点」を設定する場合は、transform-origin 属性を使用します。物体の重心になります。
今日はここまでです、ご覧いただきありがとうございます。