[css]我要用css画幅画(二)_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:33:531213검색
接着之前的[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%
5.表示横向位移的像素值， 该参数只接受数字，不需要填写单位（px）。当你写100时，就向左平移了100px。 也可以输入负数
6.表示纵向位移的像素值， 其他同上
上面提到的“原点”， 可以通过transform-origin属性进行设置，若为设置，应该是对象的重心。
今天就到这，谢谢观看。