接着之前的[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. android 中layer-list的用法

    1.可以将多个图片按照顺序层叠起来 2.在drawable下建立一个xml文件 <layer-list xmlns:android="http://schemas.android.co ...

  2. dev中控件属性设置

    private void Form1_Load(object sender, EventArgs e) { ///构建数据源 DataTable table = new DataTable(); // ...

  3. IIS上部署MVC网站,打开后ExtensionlessUrlHandler-Integrated-4.0解决方法IIS上部署MVC网站,打开后500错误

    IIS上部署MVC网站,打开后ExtensionlessUrlHandler-Integrated-4.0解决方法 IIS上部署MVC网站,打开后500错误:处理程序“ExtensionlessUrl ...

  4. 习题: codevs 2492 上帝造题的七分钟2 解题报告

    这道题是受到大犇MagHSK的启发我才得以想出来的,蒟蒻觉得自己的代码跟MagHSK大犇的代码完全比不上,所以这里蒟蒻就套用了MagHSK大犇的代码(大家可以关注下我的博客,友情链接就是大犇MagHS ...

  5. git node(&npm)安装

    1.git 下载地址:https://git-scm.com/download/win 2.node 下载地址:https://nodejs.org/en/download/ 安装node会自带npm ...

  6. SMARTFORM & SAPScript

    SMARTFORM和SAPScript是SAP用于打印单据和报表的工具.SMARTFORM是SAPScript的替代工具,但是由于 SAP最初都是用SAPScript,所以很多单据的打印,比如PO,B ...

  7. RMS问题整理

    1. 客户端提示"102错误"或者"意外错误,请与管理员联系" 解决方法:在确定Office2003已经安装SP3补丁以后请安装KB978551补丁 下载地址: ...

  8. 如何:在 SharePoint 中创建外部列表

    在创建外部内容类型后创建外部列表是一项非常简单的任务,有如下4种方式进行: 可使用 Microsoft SharePoint Designer 2010 浏览器来完成 VS2010的列表实例 采用代码 ...

  9. 原创:phoenix4.6.0连接hbase1.1.2(不使用phoenix-4.6.0-HBase-1.1-client.jar)

    官网上面的例子是在phoenix-4.6.0-HBase-1.1-client.jar完成的,这个jar包含了phoenix4.6连接hbase1.1.2所有的依赖,真是包罗万象(里面竟然还包括了se ...

  10. Android使用Fragment来实现ViewPager的功能(解决切换Fragment状态不保存)以及各个Fragment之间的通信

    以下内容为原创,转载请注明:http://www.cnblogs.com/tiantianbyconan/p/3364728.html 我前两天写过一篇博客<Android使用Fragment来 ...