你的位置:首页 > 网页设计

[网页设计][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(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 - 动画结束后,不采用动画关键帧设置的样式。

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

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

  both - 同时采用动画第一帧和最后一帧时的样式。 但值有冲突的属性不知道会如何处理。

  关键帧的设置中,第一帧不一定是from(0%),最后一帧并不一定是to(100%), 具体情况如下表,以下表格是我翻译MDN中得来的:

animation-directionanimation-iteration-count第一帧最后一帧
normal任何值0% or from100% or to
reverse任何值100% or to0% or from
alternate偶数0% or from0% or from
alternate奇数0% or from100% or to
alternate-reverse偶数100% or to100% or to
alternate-reverse奇数100% or to0% or from

 

 

 

 

 

 

 

 

PS: 以上四个属性和animation-name一样,都可以以逗号分隔设置多个值,每个值用于描述animation-name中相同位置的动画规则。animation-name,关键帧的简要信息可以查看[css]我要用css画幅画(五)

 

好了, 今天就到这里, 这幅sun-house的画也告一段落。 以后再看看画些啥吧。 谢谢阅读。

 

转载请注明出处:[css]我要用css画幅画(六)