[css]我要用css画幅画(二)_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

[css]我要用css画幅画(二)_html/css_WEB-ITnose

Jun 24, 2016 am 11:33 AM

接着之前的[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>

登入後複製

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 }

登入後複製

(新增的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 }

登入後複製

下面是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%