>웹 프론트엔드 >HTML 튜토리얼 >[css]我要用css画幅画_html/css_WEB-ITnose

[css]我要用css画幅画_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 11:34:18965검색

几年前开始就一直想用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为整数,表示旋转的角度。

 

今天就到这。以后继续。 谢谢观看。

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.