转载

[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 - 动画结束后，不采用动画关键帧设置的样式。

forward - 采用动画最后一帧时的样式

backward - 采用动画第一帧时的样式

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`