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

概述接着之前的[css]我要用css画幅画(一) ，今天，我又画一个房子，很简单，屋顶、墙壁、门。现在开始，做得效果都只兼容chrome，所以下面的css3的属性可能只有-webkit-前缀

接着之前的[css]我要用css画幅画(一) ，今天，我又画一个房子，很简单，屋顶、墙壁、门。

现在开始，做得效果都只兼容Chrome，所以下面的CSS3的属性可能只有-webkit-前缀。我只是为了兴趣画画，何必理会兼容性呢，是吧？

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/sun.CSS" /> 7     ="CSS/house.CSS"  8  9 body10     div class="sun"11         ="sun-body"></div12         ="sun-shine-light sun-shine-light1"13         ="sun-shine-light sun-shine-light2"14         ="sun-shine-light sun-shine-light3"15         ="sun-shine-light sun-shine-light4"16         ="sun-shine-light sun-shine-light5"17     18 19     ="house-wIDth house"20         ="house-wIDth house-roof house-roof-left"21         ="house-wIDth house-roof house-roof-right"22         ="house-wIDth house-wall"23             24             ="house-wall-door"25                 26                 ="house-wall-door-handle"27             28         29     30 31 HTML>

VIEw Code

CSS如下：

(原来的sun.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 }

sun.CSS

(新增的house.CSS）

.house-wIDth { 600px;.house {    bottom: 20px; 400px;10 }11 12 .house-roof {    background: gold;14     border: 3px solID #000;15  -30px; 180px;18 }19 20 .house-roof-left {    border-left-wIDth: 15px;    float: left;23  matrix(0.25,-0.4,1,-298,0);24 }25 26 .house-roof-right { matrix(1,0.3,1)">28 }29 .house-wall { 2px solID #000; 220px;33 }34 .house-wall::before{37 130px;38     content:''; -133px; 186px;    display: block;43 }44 45 .house-wall-door {46  orange; 0px; 110px;52 }53 54 .house-wall-door-handle {55  brown; 1px solID #000;    right: 10px; 90px;15px;63 }