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

接着之前的[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如下：

 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-house/sun.css" />
 7     <link rel="stylesheet" type="text/css" href="../../css/sun-house/house.css" />
 8     <link rel="stylesheet" type="text/css" href="../../css/sun-house/human.css" />
 9     <link rel="stylesheet" type="text/css" href="../../css/sun-house/cloud.css" />
10     <link rel="stylesheet" type="text/css" href="../../css/sun-house/tree.css">
11     <link rel="stylesheet" type="text/css" href="../../css/sun-house/apple.css">
12 
13     <link rel="stylesheet" type="text/css" href="../../css/sun-house/human-animate.css" />
14     <link rel="stylesheet" type="text/css" href="../../css/sun-house/cloud-animate.css" />
15 
16     <script type="text/javascript" src="js/analysis.js"></script>
17 </head>
18 <body>
19     <div class="sun">
20         <div class="sun-body"></div>
21         <div class="sun-shine-light sun-shine-light1"></div>
22         <div class="sun-shine-light sun-shine-light2"></div>
23         <div class="sun-shine-light sun-shine-light3"></div>
24         <div class="sun-shine-light sun-shine-light4"></div>
25         <div class="sun-shine-light sun-shine-light5"></div>
26     </div>
27 
28     <div class="house-width house">
29         <div class="house-width house-roof house-roof-left"></div>
30         <div class="house-width house-roof house-roof-right"></div>
31         <div class="house-width house-wall">            
32             <div class="house-wall-door">                
33                 <div class="house-wall-door-handle"></div>
34             </div>
35         </div>
36     </div>
37 
38     <div class="human human-pos-1">
39         <p class="lines human-speak">大家好，我叫小明。</p>
40         <p class="lines human-speak human-speak-delay-3">我是一个程序员，最喜欢宅在家里LOL。</p>
41         <p class="lines human-speak human-speak-delay-12">静静，我们交个朋友好吗？我的电话是13800123456。</p>
42         <div class="human-head-normal"></div>
43         <div class="human-body-normal"></div>
44         <div class="human-arms-normal"></div>
45         <div class="human-legs-normal"></div>
46     </div>
47 
48     <div class="human human-pos-2">
49         <p class="lines human-speak human-speak-delay-6">大家好，我叫静静</p>
50         <p class="lines human-speak human-speak-delay-9">和大家看到的一样，我热爱舞蹈。</p>
51         <p class="lines human-speak human-speak-delay-15">不要，程序员什么的最讨厌了！</p>
52         <div class="human-head-normal"></div>
53         <div class="human-body-normal"></div>
54         <div class="human-arms-normal"></div>
55         <div class="human-legs-1"></div>
56     </div>
57 
58     <div class="cloud cloud-pos cloud-pos-1 cloud-animate-1">
59         <div class="cloud-pos cloud-border cloud-bg cloud-top"></div>
60         <div class="cloud-pos cloud-border cloud-bg cloud-left"></div>
61         <div class="cloud-pos cloud-border cloud-bg cloud-right"></div>
62         <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>
63     </div>
64     <div class="cloud cloud-pos cloud-pos-2 cloud-animate-2">
65         <div class="cloud-pos cloud-border cloud-bg cloud-top"></div>
66         <div class="cloud-pos cloud-border cloud-bg cloud-left"></div>
67         <div class="cloud-pos cloud-border cloud-bg cloud-right"></div>
68         <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>
69     </div>
70 
71     <div class="tree">
72         <div class="tree-top">
73             <div class="tree-crowwn tree-crowwn-left"></div>
74             <div class="tree-crowwn tree-crowwn-top"></div>
75             <div class="tree-crowwn tree-crowwn-right"></div>
76             <div class="tree-crowwn tree-crowwn-bottom"></div>
77         </div>
78         <div class="tree-middle">
79             <div class="tree-trunk"></div>
80         </div>
81         <div class="tree-bottom">
82             <div class="tree-root tree-root-left"></div>
83             <div class="tree-root tree-root-middle"></div>
84             <div class="tree-root tree-root-right"></div>
85         </div>
86     </div>
87     <!-- TODO:     1.苹果左右震动一下再下跌
88             2.苹果跌下来后向左滚动几圈 -->
89     <div class="apple">
90         <div class="apple-body apple-left"></div>
91         <div class="apple-body apple-right"></div>
92         <div class="apple-stalk"></div>
93     </div>
94 </body>
95 </html>

View Code

增加的css如下：

 1 .cloud-animate-1 {
 2     -webkit-animation-duration: 20s;
 3       -webkit-animation-name: cloudMove-1;
 4       -webkit-animation-iteration-count: infinite;
 5       -webkit-animation-direction: alternate;
 6 }
 7 
 8 .cloud-animate-2 {
 9     -webkit-animation-duration: 20s;
10       -webkit-animation-name: cloudMove-2;
11       -webkit-animation-iteration-count: infinite;
12       -webkit-animation-direction: alternate;
13 }
14 
15 @-webkit-keyframes cloudMove-1 {
16     25% {
17         top : 10px;
18     }
19 
20     50% {
21         top: 50px;
22     }
23 
24     75% {
25         top: 20px; 
26     }
27 
28     to {     
29         left: 10%     
30     }
31 }
32 
33 @-webkit-keyframes cloudMove-2 {
34     25% {
35         top : 30px;
36     }
37 
38     50% {
39         top: 80px;
40     }
41 
42     75% {
43         top: 10px; 
44     }
45 
46     to { 
47         left: 85%         
48     }
49 }

could-animate

 1 .tree{
 2     bottom: 10px;
 3     height: 700px;
 4     position: absolute;
 5     right: 120px;
 6     width: 500px;
 7 }
 8 
 9 .tree-crowwn {
10     background-color: green;
11     border-radius: 50%;
12     position: absolute;
13     z-index: 2;
14 }
15 
16 .tree-crowwn-left {
17     height: 250px;
18     top: 150px;
19     width: 250px;
20 }
21 
22 .tree-crowwn-top {
23     height: 320px;
24     left: 100px;
25     width: 320px;
26 }
27 
28 .tree-crowwn-right {
29     height: 250px;
30     left: 250px;
31     top: 150px;
32     width: 250px;
33 }
34 
35 .tree-crowwn-bottom {
36     height: 120px;
37     left: 150px;
38     top: 270px;
39     width: 200px;
40 }
41 
42 .tree-trunk {
43     background-color: #5d2323;
44     height: 280px;
45     left: 170px;
46     position: absolute;
47     top: 350px;
48     width: 180px;
49     z-index: 1;
50 }
51 
52 .tree-bottom {
53     position: absolute;
54     top: 630px;
55 }
56 
57 .tree-root {
58     background-color: #503333;    
59     height: 30px;
60     position: absolute;
61     width: 20px;
62 }
63 
64 .tree-root-left {
65     left: 170px;
66     -webkit-transform: matrix(1, 0, -0.5, 1, 0, 0);
67     -webkit-transform-origin: right top;
68 }
69 
70 .tree-root-middle {
71     left: 250px;
72     -webkit-transform: matrix(1, 0, -0.1, 1, 0, 0);
73 }
74 
75 .tree-root-right {
76     left: 330px;
77     -webkit-transform: matrix(1, 0, 0.5, 1, 0, 0);
78     -webkit-transform-origin: left top;
79 }

tree

 1 .apple {
 2     bottom: 360px;
 3     height: 60px;    
 4     position: absolute;
 5     right: 480px;
 6     width: 60px;
 7     z-index: 3;
 8 
 9     -webkit-animation-duration: 1.5s;
10     -webkit-animation-delay: 18s;
11       -webkit-animation-name: appleDrop;
12       -webkit-animation-timing-function: cubic-bezier(0.5, 0.1, 0.85, 0.3);
13       -webkit-animation-fill-mode: forwards;
14 }
15 
16 .apple-body {
17     background-color: #ff3300;    
18     border-radius: 75% 75% 90% 90%;
19     height: 50px;
20     position: absolute;
21     width: 37px;
22     z-index: 3;
23 }
24 
25 .apple-left {
26 
27 }
28 
29 .apple-right {
30     right:2px;
31 }
32 
33 .apple-stalk {
34     border: none;
35     border-radius: 100%;
36     border-right: 3px solid #000;
37     height:20px;
38     left: 8px;
39     position: absolute;
40     top:-10px;
41     width:20px;
42     z-index: 2;
43 }
44 
45 @-webkit-keyframes appleDrop{
46     from{
47          
48     }
49     20%{
50          
51     }
52     80%{
53          
54     }
55     to{
56         bottom: 35px;
57     }
58 }

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(x₁, y₁, x₂, y₂)，其中四个参数都是小数，可以为负数。通过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画幅画(六)