码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-11-11 14:38:47      阅读:348      评论:0      收藏:0      [点我收藏+]

标签:

接着之前的[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属性进行设置,若未设置,应该是对象的重心。

 

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

 

 

 

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

标签:

原文地址:http://www.cnblogs.com/bee0060/p/4955767.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!