接着之前的[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>
增加的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 }
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 }
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 }
这里用到的陌生的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画幅画(六)