Home > Article > Web Front-end > [css]我要用css画幅画_html/css_WEB-ITnose
[css]我要用css画幅画_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:34:18917browse
几年前开始就一直想用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为整数，表示旋转的角度。
今天就到这。以后继续。 谢谢观看。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：盒模型CSS_html/css_WEB-ITnoseNext article：CSS基础学习五：类选择器_html/css_WEB-ITnose