ホームページ > 記事 > ウェブフロントエンド > 【css】css_html/css_WEB-ITnoseで絵を描きたい
【css】css_html/css_WEB-ITnoseで絵を描きたい
- WBOYオリジナル
- 2016-06-24 11:34:18918ブラウズ
私は数年前からCSSで絵を描きたいと思っていました。
今日が本当のスタートです、簡単に始めてください。
仕事のプレッシャーがとても大きいプログラマーとして、私はまず太陽を描かなければなりません。
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/style.css"> 7 </head> 8 <body> 9 <div class="sun">10 <div class="sun-body"></div>11 <div class="sun-shine-light sun-shine-light1"></div>12 <div class="sun-shine-light sun-shine-light2"></div>13 <div class="sun-shine-light sun-shine-light3"></div>14 <div class="sun-shine-light sun-shine-light4"></div>15 <div class="sun-shine-light sun-shine-light5"></div>16 </div>17 </body>18 </html>
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 }
ここでは、transform:rot という比較的馴染みのない css 属性が使用されています。 ate( Ndeg)
関数は回転。N は整数で、回転角度を表します。
今日はここまでです。後で続けてください。 見てくれてありがとう。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。