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

[网页设计][css]我要用css画幅画(五)

接着之前的[css]我要用css画幅画(四), 这次我给小明和静静增加了对话,用了简单的动画效果。

 

github:https://github.com/bee0060/Css-Paint , 完整代码在pages/sun-house-4.html和相关的css中可以找到

demo: http://bee0060.github.io/Css-Paint/pages/sun-house-5.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.css" /> 7   <link rel="stylesheet" type="text/css" href="../css/house.css" /> 8   <link rel="stylesheet" type="text/css" href="../css/human.css" /> 9   <link rel="stylesheet" type="text/css" href="../css/cloud.css" />10 11   <link rel="stylesheet" type="text/css" href="../css/human-animate.css" />12 </head>13 <body>14   <div class="sun">15     <div class="sun-body"></div>16     <div class="sun-shine-light sun-shine-light1"></div>17     <div class="sun-shine-light sun-shine-light2"></div>18     <div class="sun-shine-light sun-shine-light3"></div>19     <div class="sun-shine-light sun-shine-light4"></div>20     <div class="sun-shine-light sun-shine-light5"></div>21   </div>22 23   <div class="house-width house">24     <div class="house-width house-roof house-roof-left"></div>25     <div class="house-width house-roof house-roof-right"></div>26     <div class="house-width house-wall">      27       <div class="house-wall-door">        28         <div class="house-wall-door-handle"></div>29       </div>30     </div>31   </div>32 33   <div class="human human-pos-1">34     <p class="lines human-speak">大家好,我叫小明。</p>35     <p class="lines human-speak human-speak-delay-3">我是一个程序员,最喜欢宅在家里LOL。</p>36     <p class="lines human-speak human-speak-delay-12">静静,我们交个朋友好吗?我的电话是13800123456。</p>37     <div class="human-head-normal"></div>38     <div class="human-body-normal"></div>39     <div class="human-arms-normal"></div>40     <div class="human-legs-normal"></div>41   </div>42 43   <div class="human human-pos-2">44     <p class="lines human-speak human-speak-delay-6">大家好,我叫静静</p>45     <p class="lines human-speak human-speak-delay-9">和大家看到的一样,我热爱舞蹈。</p>46     <p class="lines human-speak human-speak-delay-15">不要,程序员什么的最讨厌了!</p>47     <div class="human-head-normal"></div>48     <div class="human-body-normal"></div>49     <div class="human-arms-normal"></div>50     <div class="human-legs-1"></div>51   </div>52 53   <div class="cloud cloud-pos cloud-pos-1">54     <div class="cloud-pos cloud-border cloud-bg cloud-top"></div>55     <div class="cloud-pos cloud-border cloud-bg cloud-left"></div>56     <div class="cloud-pos cloud-border cloud-bg cloud-right"></div>57     <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>58   </div>59   <div class="cloud cloud-pos cloud-pos-2">60     <div class="cloud-pos cloud-border cloud-bg cloud-top"></div>61     <div class="cloud-pos cloud-border cloud-bg cloud-left"></div>62     <div class="cloud-pos cloud-border cloud-bg cloud-right"></div>63     <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>64   </div>65 </body>66 </html>

View Code

 

我将所需的动画css放在独立的文件中:

 1 .human-speak { 2   color: #fff; 3   float: left; 4   -webkit-animation-duration: 3s; 5    -webkit-animation-name: humanLineAppear; 6 }  7  8 .human-speak-delay-3 { 9   -webkit-animation-delay: 3s10 }11 12 .human-speak-delay-6 {13   -webkit-animation-delay: 6s14 }15 16 .human-speak-delay-9 {17   -webkit-animation-delay: 9s18 }19 20 .human-speak-delay-12 {21   -webkit-animation-delay: 12s22 }23 24 .human-speak-delay-15 {25   -webkit-animation-delay: 15s26 }27 28 @-webkit-keyframes humanLineAppear{29   from{30     top: -50px;31     color: #fff;32   }33   20%{34     top: -40px;35     color: #000;36     z-index:10;37   }38   80%{39     top: -40px;40     color: #000;41     z-index:10;42   }43   to{44     top: -50px;45     color: #fff;46     z-index:1;47   }48 }

human-animate.css

 

这里用到的陌生的css属性或关键字包括:

1. -webkit-animation-duration

2.-webkit-animation-delay

3. -webkit-animation-name

4.@-webkit-keyframes

 

照例先上MDN文档地址: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations

 

动画系(animation属性及其子属性)的css在chrome中都需要加上浏览器前缀(-webkit-), 本以为前卫的chrome中不需要加前缀了,小小的遗憾了一把。下面的说明都把前缀省略。

 

以上1-3都是css属性,可以添加在css选择器中,或以内联属性的方式直接添加在标签的style属性中。

而第4个keyframes不同,下面再说。

 

1.animation-duration: 指定整个动画执行所需的时间, 接受time格式的值,即必须是数字+单位的格式, 单位可以是s(秒)或ms(毫秒),默认值为0s。

2.animation-delay: 指动画延迟执行的时间,即对象加载完毕到开始执行动画之间的时间,接受的时间格式也是时间,默认值为0s。

3.animation-name: 用于指定使用的动画规则名称。 默认值为none。

4.@keyframes:这是一个关键字, 中文翻译是“关键帧”。 开头的“@”符号是必须的,加上浏览器前缀时应该写成: @-webkit-keyframes yourKeyframesName, 其中yourKeyframesName是你的关键帧名称。

        该关键字用于声明动画规则,也可以看作一个特殊的选择器。 有点类似js中用于声明函数的function关键字。 语法类似如下:(示例中增加了-wekit-前缀)

 1 @-webkit-keyframes humanLineAppear{ 2   from{ 3     top: -50px; 4     color: #fff; 5   } 6   20%{ 7     top: -40px; 8     color: #000; 9     z-index:10;10   }11   80%{12     top: -40px;13     color: #000;14     z-index:10;15   }16   to{17     top: -50px;18     color: #fff;19     z-index:1;20   }21 }

关键帧的语法如上,关键帧内部以类似选择器的方式书写css属性,但是“选择器” 名字不再是id、className, 而是帧的描述, 或叫时间节点的描述,接受from,to或百分比数值。

其中from等同于0%, to等同于100%,

0%表示动画开始时刻, 100%表示结束时刻。 如果动画执行时间(animation-duration属性的值)是10s,那么50%表示第5秒这个时刻。

 

里面的每个百分比数值,都代表动画执行过程中的一个时间节点,我们暂称为: “帧”, 而帧的CSS属性集合,暂称为“帧选择器”。

帧选择器用于设置动画运行中某时间节点的css样式。

 

不同帧之间如果设置了相同的css属性名和不同的属性值,

浏览器会按照帧的时间顺序,针对这个CSS属性,找到属性值不同的最相邻的帧的组合(可能有多个帧的组合),以示例中的代码为例, 对于top属性会找到如下组合:

1. from(0%) --> 20%  :  top从-50px 变为-40px

2. 80% -->  to(100%) :  top从-40px 变为-50px 

 

上面的帧组合都有开始和结束帧,且其中都包含至少一个CSS属性的改变,我们暂时称其为: “帧区间”。

浏览器在动画执行时, CSS属性会在帧区间内匀速的变化,即从开始帧指定的属性值匀速增加或减少至结束帧指定的属性值。

 

--------------------------------------------------------------------------------  我是突兀的分割线  --------------------------------------------------------------------------------

 

要让一个动画生效, 以下3个条件必须满足:

1. [email protected]键帧 , 表示动画有一个有效的动画规则。

2. animation-duration大于0s, 表示动画会有大于0秒的执行时间。

3. animation-iteration-count大于0, 表示动画至少会执行1次。(该属性默认值是1,所以一般不用设置就可以) 

 

好了,现在你应该也可以写一个属于自己的简单动画了。

 

今天就到这里, 谢谢观看。 如有错误,欢迎指正。