[css]我要用css画幅画(一)_html-js-css

概述几年前开始就一直想用css画幅画。今天才真正开始，从简单的开始。作为一个工作压力那么大的程序员，我首先要画一个太阳。 html如下： 1 <!DOCTYPE html> 2 <

几年前开始就一直想用CSS画幅画。

今天才真正开始，从简单的开始。

作为一个工作压力那么大的程序员，我首先要画一个太阳。

HTML如下：

 1 <!DOCTYPE HTML> 2 <HTML lang="en" 3 head 4     Meta charset="UTF-8" 5     Title>CSS Paint</ 6     link rel="stylesheet" type="text/CSS" href="CSS/style.CSS" 7  8 body 9     div class="sun"10         ="sun-body"></div11         ="sun-shine-light sun-shine-light1"12         ="sun-shine-light sun-shine-light2"13         ="sun-shine-light sun-shine-light3"14         ="sun-shine-light sun-shine-light4"15         ="sun-shine-light sun-shine-light5"16     17 18 HTML>

VIEw Code

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  absolute;11     top:12     wIDth:13     z-index: 9;14 }15 .sun-shine-light{16  yellow;17  5px;18 250px;19     margin-top:30px;20 21 22 10;23 }24 .sun-shine-light1{25     -webkit-transform: rotate(-3deg);26     -moz-webkit-transform:27     -ms-webkit-transform:28     -o-webkit-transform:29 }30 .sun-shine-light2{31  70px;32  240px;33  rotate(10deg);34 35 36 37 }38 .sun-shine-light3{39  160px;40  195px;41  rotate(30deg);42     -ms-transform:43     -o-transform:44     transform:45 }46 .sun-shine-light4{47  215px;48  85px;    49  260px;50  rotate(55deg);51 52 53 54 }55 .sun-shine-light5{56  200px;57  -50px;58  230px;59  rotate(85deg);60 61 62 63 }