[css]我要用css画幅画_html/css

 1 2  3  4  5  6 7  8  9 10 11 12 13 14 15 16 17 18 

 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 }