接着之前的[css]我要用css画幅画(五)， 由于这个画已经画了很久了，这次一次性加了比较多更新，算是让这幅画告一段落吧。 本次的更新包括：
1. 给云增加动画
2. 画了一棵树
3. 树上画了一个苹果，并给苹果增加坠落的动画
其实还有一个TODO List， 不过这个List没有也可以算完成，所以这个List可能会无限期搁置：
1. 苹果坠落前左右摇晃一下
2. 苹果落地后滚动几圈
那么进入正题。
github：https://github.com/bee0060/Css-Paint
demo： http://bee0060.github.io/Css-Paint/pages/sun-house/sun-house-6.html
完整html如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css Paint</title>
<link rel="stylesheet" type="text/css" href="../../css/sun-house/sun.css" />
<link rel="stylesheet" type="text/css" href="../../css/sun-house/house.css" />
<link rel="stylesheet" type="text/css" href="../../css/sun-house/human.css" />
<link rel="stylesheet" type="text/css" href="../../css/sun-house/cloud.css" />
<link rel="stylesheet" type="text/css" href="../../css/sun-house/tree.css">
<link rel="stylesheet" type="text/css" href="../../css/sun-house/apple.css"> <link rel="stylesheet" type="text/css" href="../../css/sun-house/human-animate.css" />
<link rel="stylesheet" type="text/css" href="../../css/sun-house/cloud-animate.css" /> <script type="text/javascript" src="js/analysis.js"></script>
</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> <div class="human human-pos-1">
<p class="lines human-speak">大家好，我叫小明。</p>
<p class="lines human-speak human-speak-delay-3">我是一个程序员，最喜欢宅在家里LOL。</p>
<p class="lines human-speak human-speak-delay-12">静静，我们交个朋友好吗？我的电话是13800123456。</p>
<div class="human-head-normal"></div>
<div class="human-body-normal"></div>
<div class="human-arms-normal"></div>
<div class="human-legs-normal"></div>
</div> <div class="human human-pos-2">
<p class="lines human-speak human-speak-delay-6">大家好，我叫静静</p>
<p class="lines human-speak human-speak-delay-9">和大家看到的一样，我热爱舞蹈。</p>
<p class="lines human-speak human-speak-delay-15">不要，程序员什么的最讨厌了！</p>
<div class="human-head-normal"></div>
<div class="human-body-normal"></div>
<div class="human-arms-normal"></div>
<div class="human-legs-1"></div>
</div> <div class="cloud cloud-pos cloud-pos-1 cloud-animate-1">
<div class="cloud-pos cloud-border cloud-bg cloud-top"></div>
<div class="cloud-pos cloud-border cloud-bg cloud-left"></div>
<div class="cloud-pos cloud-border cloud-bg cloud-right"></div>
<div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>
</div>
<div class="cloud cloud-pos cloud-pos-2 cloud-animate-2">
<div class="cloud-pos cloud-border cloud-bg cloud-top"></div>
<div class="cloud-pos cloud-border cloud-bg cloud-left"></div>
<div class="cloud-pos cloud-border cloud-bg cloud-right"></div>
<div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>
</div> <div class="tree">
<div class="tree-top">
<div class="tree-crowwn tree-crowwn-left"></div>
<div class="tree-crowwn tree-crowwn-top"></div>
<div class="tree-crowwn tree-crowwn-right"></div>
<div class="tree-crowwn tree-crowwn-bottom"></div>
</div>
<div class="tree-middle">
<div class="tree-trunk"></div>
</div>
<div class="tree-bottom">
<div class="tree-root tree-root-left"></div>
<div class="tree-root tree-root-middle"></div>
<div class="tree-root tree-root-right"></div>
</div>
</div>
<!-- TODO: 1.苹果左右震动一下再下跌
2.苹果跌下来后向左滚动几圈 -->
<div class="apple">
<div class="apple-body apple-left"></div>
<div class="apple-body apple-right"></div>
<div class="apple-stalk"></div>
</div>
</body>
</html>
增加的css如下：
.cloud-animate-1 {
-webkit-animation-duration: 20s;
-webkit-animation-name: cloudMove-1;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
.cloud-animate-2 {
-webkit-animation-duration: 20s;
-webkit-animation-name: cloudMove-2;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
@-webkit-keyframes cloudMove-1 {
25% {
top : 10px;
}
50% {
top: 50px;
}
75% {
top: 20px;
}
to {
left: 10%
}
}
@-webkit-keyframes cloudMove-2 {
25% {
top : 30px;
}
50% {
top: 80px;
}
75% {
top: 10px;
}
to {
left: 85%
}
}
could-animate
.tree{
bottom: 10px;
height: 700px;
position: absolute;
right: 120px;
width: 500px;
}
.tree-crowwn {
background-color: green;
border-radius: 50%;
position: absolute;
z-index:;
}
.tree-crowwn-left {
height: 250px;
top: 150px;
width: 250px;
}
.tree-crowwn-top {
height: 320px;
left: 100px;
width: 320px;
}
.tree-crowwn-right {
height: 250px;
left: 250px;
top: 150px;
width: 250px;
}
.tree-crowwn-bottom {
height: 120px;
left: 150px;
top: 270px;
width: 200px;
}
.tree-trunk {
background-color: #5d2323;
height: 280px;
left: 170px;
position: absolute;
top: 350px;
width: 180px;
z-index:;
}
.tree-bottom {
position: absolute;
top: 630px;
}
.tree-root {
background-color: #503333;
height: 30px;
position: absolute;
width: 20px;
}
.tree-root-left {
left: 170px;
-webkit-transform: matrix(1, 0, -0.5, 1, 0, 0);
-webkit-transform-origin: right top;
}
.tree-root-middle {
left: 250px;
-webkit-transform: matrix(1, 0, -0.1, 1, 0, 0);
}
.tree-root-right {
left: 330px;
-webkit-transform: matrix(1, 0, 0.5, 1, 0, 0);
-webkit-transform-origin: left top;
}
tree
.apple {
bottom: 360px;
height: 60px;
position: absolute;
right: 480px;
width: 60px;
z-index:;
-webkit-animation-duration: 1.5s;
-webkit-animation-delay: 18s;
-webkit-animation-name: appleDrop;
-webkit-animation-timing-function: cubic-bezier(0.5, 0.1, 0.85, 0.3);
-webkit-animation-fill-mode: forwards;
}
.apple-body {
background-color: #ff3300;
border-radius: 75% 75% 90% 90%;
height: 50px;
position: absolute;
width: 37px;
z-index:;
}
.apple-left {
}
.apple-right {
right:2px;
}
.apple-stalk {
border: none;
border-radius: 100%;
border-right: 3px solid #000;
height:20px;
left: 8px;
position: absolute;
top:-10px;
width:20px;
z-index:;
}
@-webkit-keyframes appleDrop{
from{
}
20%{
}
80%{
}
to{
bottom: 35px;
}
}
apple
这里用到的陌生的css属性包括(直接附上相关的MDN文档链接）：
1. animation-iteration-count - 代表动画执行的次数，默认值为1。值可以是非负整数或infinite关键字， infinite表示执行无数次。
2. animation-direction - 代表关键帧的运行方向，默认值为normal。 可选的值共包括：
- normal：正向执行，顺序为从from(0%)执行到to(100%)。
- reverse： 反向执行，顺序为从to(100%)执行到from(0%)。
- alternate: 先正向执行再反向执行，也可以理解为奇数次时正向执行， 偶数次时反向执行。
- alternate-reverse： 和alternate相反，先反向执行再正向执行。
3. animation-timing-function - MDN文档说该属性用于定义动画在周期中执行的节奏，我的理解是用于定义动画中帧之间属性的变化速率。 默认值是ease(缓动-先加速再减速）。
通常可以用简写来指定， 常用的简写有缓动（ease,ease-in,ease-out,ease-in-out）和匀速（linear）。 除了关键字外，还有稍微特殊的设置：
- steps : 语法为 steps(N, target) , N为正整数， target为目标，可以设置start或end（其他值没试过，文档中也没提到）。 意思就是， 不匀速的分N次到达start。 这里举个栗子
- cubic-bezier： 贝塞尔曲线，语法为 cubic-bezier(x1, y1, x2, y2)， 其中四个参数都是小数，可以为负数。 通过x和y坐标，定出2个点，通过这两个点，描述一个变化曲线。还没深入研究过，这里暂不多谈。前面的链接是百度百科的，有兴趣可以看看。今天搜到一个不错的网站，可以用来感受一下贝塞尔曲线在动画上的实际效果：http://cubic-bezier.com/#.17,.67,.83,.67 。 平时写动画时也可以借助这个网站，不用辛苦的调半天数字。
想深入了解这个属性，建议找找更深入的文章，这里只是浅尝辄止 ：）
4. animation-fill-mode - 用于声明动画执行结束后的目标样式，默认值为none。该值受animation-direction和 animation-iteration-count值的影响。 若animation-iteration-count的值是infinite，动画不会结束，则该属性无效。
可选值包括：
none - 动画结束后，不采用动画关键帧设置的样式。
forwards - 采用动画最后一帧时的样式
backwards - 采用动画第一帧时的样式
both - 同时采用动画第一帧和最后一帧时的样式。 但值有冲突的属性不知道会如何处理。
关键帧的设置中，第一帧不一定是from(0%),最后一帧并不一定是to(100%), 具体情况如下表，以下表格是我翻译MDN中得来的：
animation-direction |
animation-iteration-count |
第一帧 | 最后一帧 |
|---|---|---|---|
normal |
任何值 |
0% or from
|
100% or to
|
reverse |
任何值 |
100% or to
|
0% or from
|
alternate |
偶数 |
0% or from
|
0% or from
|
alternate |
奇数 |
0% or from
|
100% or to
|
alternate-reverse |
偶数 |
100% or to
|
100% or to
|
alternate-reverse |
奇数 |
100% or to
|
0% or from
|
PS： 以上四个属性和animation-name一样，都可以以逗号分隔设置多个值，每个值用于描述animation-name中相同位置的动画规则。animation-name，关键帧的简要信息可以查看[css]我要用css画幅画(五)
说完基础， 说下我是怎么画的。
1. 云的飘动： 用animation-direction设置动画会来回执行，用animation-iteration-count设置无限次执行。
2. 树： 用四个圆形组成树冠， 矩形组成树干， 3个倾斜的矩形组成3个树根。
3. 苹果： 用两个圆形组成苹果的果肉部分，用一个原型的div的border-right画出苹果的梗。 用animation-delay设置延迟执行动画， 用animation-timing-function让下落模仿*落体的加速度， 用animation-fill-mode让苹果落地后停在那里。
好了， 今天就到这里， 这幅sun-house的画也告一段落。 以后再看看画些啥吧。 谢谢阅读。
转载请注明出处：[css]我要用css画幅画(六)