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