[css]我要用css画幅画(二)
接着之前的[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画幅画(三)
接着之前的[css]我要用css画幅画(二), 今天,我画了一个小人,他的名字暂时叫作小明. 以下只列出本次修改增加的内容 html如下: <div class="human left ...
- [css]我要用css画幅画(一)
几年前开始就一直想用css画幅画. 今天才真正开始, 从简单的开始. 作为一个工作压力那么大的程序员,我首先要画一个太阳. html如下: <!DOCTYPE html> <html ...
- [css]我要用css画幅画(九) - Apple Logo
接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说. 其实之前的也打算详细讲分析和设计过程,不过之前的图比 ...
- [css]我要用css画幅画(八) - Hello Kitty
接着之前的[css]我要用css画幅画(七) - 哆啦A梦,这次画的是Hello Kitty. /* 开始前先说点废话, 一转眼就2016年了,过完年后一直没更新博客,无他,就是懒得动. 这一转眼,一 ...
- [css]我要用css画幅画(七) - 哆啦A梦
接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...
- [css]我要用css画幅画(六)
接着之前的[css]我要用css画幅画(五), 由于这个画已经画了很久了,这次一次性加了比较多更新,算是让这幅画告一段落吧. 本次的更新包括: 1. 给云增加动画 2. 画了一棵树 3. 树上画了一个 ...
- [css]我要用css画幅画(五)
接着之前的[css]我要用css画幅画(四), 这次我给小明和静静增加了对话,用了简单的动画效果. github:https://github.com/bee0060/Css-Paint , 完整代码 ...
- [css]我要用css画幅画(四)
接着之前的[css]我要用css画幅画(三), 今天,我画了两朵云,并给小明介绍了个朋友:静静. github:https://github.com/bee0060/Css-Paint , 完整代码在 ...
- 【html、CSS、javascript-5】css应用场景补充
一.CSS全局应用 父标签div下包含两个子标签div,当子标签dvi全部向左float,此时父标签设置的背景色是不显示的 <!DOCTYPE html> <html lang=&q ...
随机推荐
- iOS学习笔记——触控与手势
触控 此部分内容已学良久,恨记之甚晚,忙矣,懒矣!本文简而记焉,恐日后忘也. 在iOS的触控事件中,有触控.事件以及响应者这三个角色,一个触摸则代表了一只手指和屏幕接触这个动作所包含的信息:而事件则包 ...
- 使用CallerMemberName简化InotifyPropertyChanged的实现
在WPF中,当我们要使用MVVM的方式绑定一个普通对象的属性时,界面上往往需要获取到属性变更的通知, class NotifyObject : INotifyPropertyChanged ...
- css背景图
- 图-最短路径-Dijktra（迪杰斯特拉）算法
1. 迪杰斯特拉算法是由荷兰计算机科学家狄克斯特拉算法于1959 年提出的,因此又叫狄克斯特拉算法.是从一个顶点到其余各顶点的最短路径算法,解决的是有向图中最短路径问题.迪杰斯特拉算法主要特点是以起始 ...
- objective-c NSMutableAttributedString
NSMutableAttributedString 是一个很强悍的富文本处理字符串,可以方便的实现一个字符串中某个字符的样式处理.我把我下面代码实现的功能步骤说一下:首先拼接两个字符串,然后给前前半部 ...
- 泛函编程（32）－泛函IO：IO Monad
由于泛函编程非常重视函数组合(function composition),任何带有副作用(side effect)的函数都无法实现函数组合,所以必须把包含外界影响(effectful)副作用不纯代码( ...
- 使用Spring的@Scheduled实现定时任务
Spring配置文件xmlns加入xmlns:task="http://www.springframework.org/schema/task"xsi:schemaLocation ...
- Java final方法
之所以要使用final方法,可能是出于对两方面理由的考虑.第一个是为方法"上锁",防止任何继承类改变它的本来含义.设计程序时,若希望一个方法的行为在继承期间保持不变,而且不可被覆盖 ...
- 今天做项目时，用到了好多关于js的知识点，有的忘记了，然后晚上回来自己整理一番，明天继续整理。哈哈，分享给大家。
javascript 数据类型 typeof (直接量/变量)-------判断数据类型 简单数据类型(栈,空间小,速度快) string字符串 用引号引起来的文本 number数字 所有数字 NaN ...
- jQuery als.js 跑马灯
ali.js是一款滚动插件,滚动的内容可包含文字和图片.它的API也很强大,包括滚动区域可见个数.每次滚动个数.滚动方向.是否循环滚动.是否自动滚动.滚动间隔时间.滚动动画速度.动画效果.滚动方向以及 ...