[css]我要用css画幅画(二)

前端开发作者： 2024-08-21 10:35:02

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

 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

 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-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 }