[css]我要用css画幅画(六)_html/css_WEB-ITnose
- WBOY原創
- 2016-06-24 11:32:341227瀏覽
接着之前的[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。 可选的值共包括：
3. animation-timing-function - MDN文档说该属性用于定义动画在周期中执行的节奏，我的理解是用于定义动画中帧之间属性的变化速率。 默认值是ease(缓动-先加速再减速）。
通常可以用简写来指定， 常用的简写有缓动（ease,ease-in,ease-out,ease-in-out）和匀速（linear）。 除了关键字外，还有稍微特殊的设置：
想深入了解这个属性，建议找找更深入的文章，这里只是浅尝辄止 ：）
4. animation-fill-mode - 用于声明动画执行结束后的目标样式，默认值为none。该值受animation-direction和 animation-iteration-count值的影响。 若animation-iteration-count的值是infinite，动画不会结束，则该属性无效。
可选值包括：
none - 动画结束后，不采用动画关键帧设置的样式。
forward - 采用动画最后一帧时的样式
backward - 采用动画第一帧时的样式
both - 同时采用动画第一帧和最后一帧时的样式。 但值有冲突的属性不知道会如何处理。
关键帧的设置中，第一帧不一定是from(0%),最后一帧并不一定是to(100%), 具体情况如下表，以下表格是我翻译MDN中得来的：
| 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画幅画(五)
好了， 今天就到这里， 这幅sun-house的画也告一段落。 以后再看看画些啥吧。 谢谢阅读。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn