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

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

html如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Css Paint</title>

     <link rel="stylesheet" type="text/css" href="css/sun.css" />

     <link rel="stylesheet" type="text/css" href="css/house.css" />

 </head>

 <body>

     <div class="sun">

         <div class="sun-body"></div>

         <div class="sun-shine-light sun-shine-light1"></div>

         <div class="sun-shine-light sun-shine-light2"></div>

         <div class="sun-shine-light sun-shine-light3"></div>

         <div class="sun-shine-light sun-shine-light4"></div>

         <div class="sun-shine-light sun-shine-light5"></div>

     </div>

     <div class="house-width house">

         <div class="house-width house-roof house-roof-left"></div>

         <div class="house-width house-roof house-roof-right"></div>

         <div class="house-width house-wall">

             <div class="house-wall-door">

                 <div class="house-wall-door-handle"></div>

             </div>

         </div>

     </div>

 </body>

 </html>

css如下：

(原来的sun.css)

 .sun{

     position: relative;

 }

 .sun-body{

     background-color: red;

     border-radius: 50%;

     height: 300px;

     left: -100px;

     position: absolute;

     top: -100px;

     width: 300px;

     z-index:;

 }

 .sun-shine-light{

     background-color: yellow;

     height: 5px;

     left:250px;

     margin-top:30px;

     position: relative;

     width: 300px;

     z-index:;

 }

 .sun-shine-light1{

     -webkit-transform: rotate(-3deg);

     -moz-webkit-transform: rotate(-3deg);

     -ms-webkit-transform: rotate(-3deg);

     -o-webkit-transform: rotate(-3deg);

 }

 .sun-shine-light2{

     top: 70px;

     left: 240px;

     -webkit-transform: rotate(10deg);

     -moz-webkit-transform: rotate(10deg);

     -ms-webkit-transform: rotate(10deg);

     -o-webkit-transform: rotate(10deg);

 }

 .sun-shine-light3{

     top: 160px;

     left: 195px;

     -webkit-transform: rotate(30deg);

     -ms-transform: rotate(30deg);

     -o-transform: rotate(30deg);

     transform: rotate(30deg);

 }

 .sun-shine-light4{

     top: 215px;

     left: 85px;

     width: 260px;

     -webkit-transform: rotate(55deg);

     -ms-transform: rotate(55deg);

     -o-transform: rotate(55deg);

     transform: rotate(55deg);

 }

 .sun-shine-light5{

     top: 200px;

     left: -50px;

     width: 230px;

     -webkit-transform: rotate(85deg);

     -ms-transform: rotate(85deg);

     -o-transform: rotate(85deg);

     transform: rotate(85deg);

 }

sun.css

(新增的house.css）

 .house-width {

     width: 600px;

 }

 .house {

     bottom: 20px;

     height: 400px;

     left: 600px;

     position: absolute;

 }

 .house-roof {

     background: gold;

     border: 3px solid #000;

     left: -30px;

     height: 180px;

     position: relative;

 }

 .house-roof-left {

     border-left-width: 15px;

     float: left;

     -webkit-transform: matrix(0.25, 0, -0.4, 1, -298, 0);

 }

 .house-roof-right {

     -webkit-transform: matrix(1, 0, 0.3, 1, 0, 0);

 }

 .house-wall {

     border: 2px solid #000;

     height: 220px;

 }

 .house-wall::before{

     border: 2px solid #000;

     height: 220px;

     width:130px;

     content:'';

     left: -133px;

     top: 186px;

     position: absolute;

     display: block;

 }

 .house-wall-door {

     background: orange;

     bottom: 0px;

     height: 180px;

     left: 110px;

     position: absolute;

     width: 110px;

 }

 .house-wall-door-handle {

     background: brown;

     border: 1px solid #000;

     border-radius: 50%;

     height: 15px;

     position: absolute;

     right: 10px;

     top: 90px;

     width:15px;

 }

house.css

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

或者你可以直接看github上的demo效果： http://bee0060.github.io/Css-Paint/pages/sun-house/sun-house-2.html

代码已经上传github：https://github.com/bee0060/Css-Paint

这里用到了以下这个陌生的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画幅画(三)

[css]我要用css画幅画(二)的更多相关文章

  1. [css]我要用css画幅画(三)

    接着之前的[css]我要用css画幅画(二), 今天,我画了一个小人,他的名字暂时叫作小明. 以下只列出本次修改增加的内容 html如下: <div class="human left ...

  2. [css]我要用css画幅画(一)

    几年前开始就一直想用css画幅画. 今天才真正开始, 从简单的开始. 作为一个工作压力那么大的程序员,我首先要画一个太阳. html如下: <!DOCTYPE html> <html ...

  3. [css]我要用css画幅画(九) - Apple Logo

    接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说. 其实之前的也打算详细讲分析和设计过程,不过之前的图比 ...

  4. [css]我要用css画幅画(八) - Hello Kitty

    接着之前的[css]我要用css画幅画(七) - 哆啦A梦,这次画的是Hello Kitty. /* 开始前先说点废话, 一转眼就2016年了,过完年后一直没更新博客,无他,就是懒得动. 这一转眼,一 ...

  5. [css]我要用css画幅画(七) - 哆啦A梦

    接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...

  6. [css]我要用css画幅画(六)

    接着之前的[css]我要用css画幅画(五), 由于这个画已经画了很久了,这次一次性加了比较多更新,算是让这幅画告一段落吧. 本次的更新包括: 1. 给云增加动画 2. 画了一棵树 3. 树上画了一个 ...

  7. [css]我要用css画幅画(五)

    接着之前的[css]我要用css画幅画(四), 这次我给小明和静静增加了对话,用了简单的动画效果. github:https://github.com/bee0060/Css-Paint , 完整代码 ...

  8. [css]我要用css画幅画(四)

    接着之前的[css]我要用css画幅画(三), 今天,我画了两朵云,并给小明介绍了个朋友:静静. github:https://github.com/bee0060/Css-Paint , 完整代码在 ...

  9. 【html、CSS、javascript-5】css应用场景补充

    一.CSS全局应用 父标签div下包含两个子标签div,当子标签dvi全部向左float,此时父标签设置的背景色是不显示的 <!DOCTYPE html> <html lang=&q ...

随机推荐

  1. ASP.NET MVC Model绑定小结

    Model绑定是指从URL提取数据,生成对应Action方法的参数这个过程.前面介绍的一系列Descriptor负责提供了控制器,行为方法和参数的元数据,ValueProvieder负责获取数据,剩下 ...

  2. 用c#开发微信 (4) 基于Senparc.Weixin框架的接收事件推送处理 （源码下载）

    本文讲述使用Senparc.Weixin框架来快速处理各种接收事件推送.这里的消息指的是传统的微信公众平台消息交互,微信用户向公众号发送消息后,公众号回复消息给微信用户.包括以下类型: 1 subsc ...

  3. android 开发环境搭建

    http://www.cnblogs.com/bjzhanghao/archive/2012/11/14/2769409.html http://jingyan.baidu.com/article/7 ...

  4. CSS使图片变灰

    为了悼念,各大网站都纷纷将自己的站点颜色调灰,就连图片也一样,到底如何实现的呢,请看下面的代码. 〈img src="http://hovertree.com/hvtimg/201512/f ...

  5. iOS阶段学习第15天笔记（NSArray与NSMutableArray 数组）

    iOS学习(OC语言)知识点整理 一.OC中的数组 1)数组:也是一个对象,数组中存放的是对象的地址,可以存放任意类型对象的地址,只能是对象不能是具体的数值,数组是有序的,      可以存放重复的元 ...

  6. Oracle 表分组 group by和模糊查询like

    分组group by写法 select 字段名 from 表名 group by 字段名 查询这个字段名里的种类分组后可以加聚合函数select 字段名,聚合函数 from 表名 group by 字 ...

  7. Mybatis分页插件 - PageHelper

    1.说明 如果你也在用Mybatis,建议尝试该分页插件,这个一定是最方便使用的分页插件. 该插件目前支持Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL六种 ...

  8. GJM : Taurus.MVC 2.0 开源发布：WebAPI开发教程 [转载]

    Taurus.MVC 2.0 开源发布:WebAPI开发教程 转载自http://www.cnblogs.com/cyq1162/p/6069020.html 因是新手  粘贴时有一个版权问题 本文原 ...

  9. 如何解决CRUD操作中与业务无关的字段赋值

    提高效率一直是个永恒的话题,编程中有一项也是可以提到效率的,那就是专注做一件事情,让其它没有强紧密联系的与之分开.这里分享下我们做CRUD时遇到的常见数据处理场景: 数据库表字段全部设计为非空,即使这 ...

  10. OGNl和ValueStack的基础和深入分析

    一.OGNL 1)什么是OGNL? 解析:OGNL是Object Graph Navigation Language(对象图导航语言)它是强大的表达式语言. 2)用途:通过简单一致的表达式语法来读取和 ...