Heim >Web-Frontend >HTML-Tutorial >[css]我要用css画幅画_html/css_WEB-ITnose
[css]我要用css画幅画_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:34:18965Durchsuche
几年前开始就一直想用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 }
这里用到一个比较陌生的css属性： transform:rotate(Ndeg)
作用是旋转，其中N为整数，表示旋转的角度。
今天就到这。以后继续。 谢谢观看。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：盒模型CSS_html/css_WEB-ITnoseNächster Artikel：CSS基础学习五：类选择器_html/css_WEB-ITnose