你的位置:首页 > 网页设计

[网页设计][css]我要用css画幅画(二)


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

 

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

 

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/sun.css" /> 7   <link rel="stylesheet" type="text/css" href="css/house.css" /> 8 </head> 9 <body>10   <div class="sun">11     <div class="sun-body"></div>12     <div class="sun-shine-light sun-shine-light1"></div>13     <div class="sun-shine-light sun-shine-light2"></div>14     <div class="sun-shine-light sun-shine-light3"></div>15     <div class="sun-shine-light sun-shine-light4"></div>16     <div class="sun-shine-light sun-shine-light5"></div>17   </div>18 19   <div class="house-width house">20     <div class="house-width house-roof house-roof-left"></div>21     <div class="house-width house-roof house-roof-right"></div>22     <div class="house-width house-wall">23       24       <div class="house-wall-door">25         26         <div class="house-wall-door-handle"></div>27       </div>28     </div>29   </div>30 </body>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   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 }

sun.css

(新增的house.css)

 1 .house-width { 2   width: 600px; 3 } 4  5 .house { 6   bottom: 20px; 7   height: 400px; 8   left: 600px; 9   position: absolute;10 }11 12 .house-roof {13   background: gold;14   border: 3px solid #000;15   left: -30px;16   height: 180px;17   position: relative;18 }19 20 .house-roof-left {21   border-left-width: 15px;22   float: left;23   -webkit-transform: matrix(0.25, 0, -0.4, 1, -298, 0);24 }25 26 .house-roof-right {27   -webkit-transform: matrix(1, 0, 0.3, 1, 0, 0);28 }29 30 .house-wall {31   border: 2px solid #000;32   height: 220px;33 }34 .house-wall::before{35   border: 2px solid #000;36   height: 220px;37   width:130px;38   content:'';39   left: -133px;40   top: 186px;41   position: absolute;42   display: block;43 }44 45 .house-wall-door {46   background: orange;47   bottom: 0px;48   height: 180px;49   left: 110px;50   position: absolute;51   width: 110px;52 }53 54 .house-wall-door-handle {55   background: brown;56   border: 1px solid #000;57   border-radius: 50%;58   height: 15px;59   position: absolute;60   right: 10px;61   top: 90px;62   width:15px;63 }

house.css

 

下面是code pen中的效果:  Sun and house

 

这里用到了以下这个陌生的css:

-webkit-transform: matrix(1, 0, 0.3, 1, 0, 0);  (由于任性的我只兼容chrome, 所以这里都带有-webkit前缀, 如果你要在FIREFOX下用,就改成-moz-前缀吧)

 

matrix, 我在画屋顶时用到它,matrix是用于画矩形的。

matrix的MDN文档在此:https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

另外,你可以在这里试验这个属性不同参数下的表现:http://www.css88.com/tool/css3Preview/Transform-Matrix.html

 

matrix接受6个参数, 这六个参数均接受正负小数:

1. 表示宽度的变性比例, 1表示100%,即不变, 0.25表示只有原本的25%。

2. 我的猜测是:表示以原点为基准,原点左边向上倾斜变形、原点右边向下倾斜变形的数值,这个数值是倾斜变形角度的正切函数的值,也就是当你输入1的时候,会顺时针倾斜45度,因为tan45 = 1。或者叫做倾斜的斜率。

3. 我的猜测是:表示以原点为基准,原点之上向左倾斜变形、原点之下向右倾斜变形的斜率。 该数值越大,倾斜变形越严重。

4.表示高度的变性比例, 1表示100%,即不变, 0.25表示只有原本的25%。

5.表示横向位移的像素值, 该参数只接受数字,不需要填写单位(px)。当你写100时,就向左平移了100px。 也可以输入负数。

6.表示纵向位移的像素值, 其他同上。

 

上面提到的“原点”, 可以通过transform-origin属性进行设置,若未设置,应该是对象的重心。

 

今天就到这,谢谢观看。 如有错误,欢迎指正。