计算机文化

Size: px

Start display at page:

Download "计算机文化"

鼓源卫
5 years ago
Views:

1 1 Web 前端开发技术与实践第 13 章 : 动画阮晓龙 / rxl@hactcm.edu.cn 河南中医学院管理信息工程学科河南中医学院网络信息中心

2 2 本章主要内容 Web 动画使用变形属性使用过渡属性使用动画属性案例 : 引人入胜的动态照片墙

3 3 1.Web 动画 1.1 GIF 动画 GIF(Graphics Interchange Format, 图形互换格式 ) 是为跨平台而开发的动画格式, 从 1989 年 GIF89a 格式问世之后就变得十分流行,Web 前端开发者可通过 GIF 实现简单的网页动画 GIF 支持透明背景图像, 适合在不同背景的网页上展示同时许多操作系统中都可以使用 GIF, 使其展示有着跨平台的优势另外,GIF 图片的体型很小, 很适合在网上传播

4 4 现场演示 : 案例 13-01: 在页面中使用 GIF 动画

5 5 1.Web 动画 1.2 Flash 动画 Flash 是由 MacroMedia 公司推出的交互式矢量图和 Web 动画的标准, 它以绚丽的视觉效果和丰富的交互体验而著称 Flash 是作为浏览器的一个扩展出现, 为当时的浏览器提供了它们所不具备的功能, 正是因为 Flash 动画在网页中的广泛应用才使得 Web 前端呈现一种多媒体效果通过 Flash 技术,Web 前端开发者可以实现动态的视觉效果和多元化的信息传达

6 6 现场演示 : 案例 13-02: 在页面中使用 Flash 动画

7 7 1.Web 动画 1.3 JS 动画 JavaScript 动画是 Web 前端中另外一种重要的动画形式其实现主要基于 JavaScript 对 HTML 的操作, 通过 JavaScript 与 CSS 样式的结合可以实现丰富多彩的动画效果 JavaScript 动画在 Web 前端开发中以其良好的兼容性灵活的控制力占据着 Web 动画开发的半壁江山 JavaScript 动画的制作偏向编程, 开发使用难度较高, 而且其开发需要具有丰富的 Web 前端开发经验和编程经验

8 8 1.Web 动画 1.4 CSS3 动画动画是 CSS3 的一种新特性, 它可以在不借助 JavaScript 和 Flash 的情况下使大多数 HTML 元素动起来 CSS 动画的出现使的 Web 前端动画的开发变得更为简单, 只要精通 HTML 和 CSS 就可以做出漂亮的动画, 甚至可以较为容易的实现对 JavaScript 来说十分困难的 2D 3D 效果

9 9 2. 使用变形属性 2.1 进行简单变形 CSS3 变形就是页面元素的一些展示效果的集合, 比如平移旋转缩放和倾斜效果, 每个效果都可通过变形函数 (Transform Function) 实现变形函数主要包括有 rotate( 旋转 ) skew( 扭曲 ) scale ( 缩放 ) 和 translate( 移动 ) 以及 matrix( 矩阵变形 ) 形式, 变形属性语法格式如下所示 none: 默认值为, 表示不进行变形 ; transform-function: 表示一个或者多个变形函数, 以空格分开就是同时对一个元素进行多种变形的属性操作

10 10 现场演示 : 案例 13-03: 使用 transform 属性进行简单变形

11 11 2. 使用变形属性 2.2 变形子属性 transform-origin 属性该属性用来指定元素的中心点位置, 默认情况下, 变形的原点在元素的中心点, 也就是元素 X 轴和 Y 轴的 50% 处, 其语法如下所示该属性值可以是百分比 em px 等具体的值, 也可以是 top bottom right left 和 center 关键词 2D 变形中该属性可以设置一个参数值, 也可设置两个属性值 3D 变形中该属性还包括了 Z 轴的值, 设置元素在三维空间中的像素原点

12 12 现场演示 : 案例 13-04: 改变元素 transform-origin 属性

13 13 2. 使用变形属性 2.2 变形子属性 transform-style 属性该属性是 3D 变形中的一个重要属性, 指定其子元素在 3D 空间中如何呈现, 其语法如下所示该属性主要包括以下两个值 : flat: 默认值, 表示所有子元素在 2D 平面呈现 preserve-3d: 所有子元素在 3D 空间中展示

14 14 现场演示 : 案例 13-05:transform-style 属性效果

15 15 2. 使用变形属性 2.2 变形子属性 perspective 属性该属性用于设置观看者的位置, 并将可视内容映射到一个视锥上, 继而投到 2D 视平面上如果不指定该属性, 则 Z 轴空间中的所有点将平铺到同一个 2D 视平面中, 并且变换结果中将不存在景深概念该属性语法如下所示 none: 默认值, 表示以无限的视角来看 3D 物体, 但看上去是平的 number: 接受一个单位大于 0 的值, 其单位不能为百分比值

16 16 现场演示 : 案例 13-06:perspective 属性效果展示

17 17 2. 使用变形属性 2.2 变形子属性 perspective-origin 属性该属性的使用需要配合 perspective 属性, 主要用来决定观看者的视觉观测点在 Z 平面的位置, 它实际上设置了 X 轴和 Y 轴的位置, 可设置不同的视觉观测点, 其语法如下所示第一个值指定视觉观测点在元素 X 轴上的位置, 属性值是长度值百分比或者以下三个关键词之一 left: 在包含框的 X 轴方向长度的 0% center: 中间点 right: 长度的 100%

18 18 2. 使用变形属性 2.2 变形子属性 perspective-origin 属性第二个值指定视觉观测点在元素 Y 轴上的位置, 属性值是长度值百分比或者以下三个关键词之一 top: 在包含框的 Y 轴方向长度的 0% center: 中间点 bottom: 长度的 100%

19 19 现场演示 : 案例 13-07:perspective-origin 属性效果

20 20 2. 使用变形属性 2.2 变形子属性 backface-visibility 属性该属性决定元素旋转后其背面是否可见, 对于未旋转的元素, 该元素的正面面向观看者如果该元素沿 Y 轴旋转约 180 度时会导致元素的背面面对观看者, 这时就需要定义元素的背面是否可见, 其语法如下所示该属性有以下两个属性值 visible: 默认值, 反面可见 hidden: 反面不可见

21 21 现场演示 : 案例 13-08:backface-visibility 属性效果

22 22 2. 使用变形属性 2.3 变形子属性 2D 位移在元素变形中需要使用到多种变形函数以实现元素的位移缩放旋转等操作 translate() 函数为位移函数, 可在不影响到 X Y 轴上其他元素的情况下将元素从原来的位置移动到另外一个位置, 其语法如下所示

23 23 2. 使用变形属性 2.3 变形子属性 2D 位移 translate() 函数可以取一个值, 也可取两个值, 取值说明如下 : x: 代表 X 轴 ( 横坐标 ) 移动的向量长度, 当其值为正值时, 元素向 X 轴右方向移动, 反之其值为负值时, 元素向 X 轴左方向移动 y: 代表 Y 轴 ( 纵坐标 ) 移动的向量长度, 当其值为正值时, 元素向 Y 轴下方向移动, 反之其值为负值时, 元素向 Y 轴上方向移动如果要将元素仅仅沿着一个方向移动, 可使用 translate(x,0) 和 translate(0,y) 来实现变形函数中提供了一些单个方向移动的简单函数, 方便开发者使用 ranslatex(n): 在水平方向上移动一个元素 translatey(n): 在竖直方向上移动一个元素

24 24 2. 使用变形属性 2.3 变形子属性 2D 缩放缩放函数 scale() 可以使元素根据其中心原点进行缩放, 默认值为 1, 即不缩放当 scale() 的值为 0.01 到 0.99 之间, 可以让一个元素缩小 ; scale() 的值为任何大于或等于 1.01 的值时, 可以让一个元素放大, 其语法如下所示 scale() 函数的语法和 translate() 函数非常相似, 可以设置一个值, 也可以设置两个值, 只有一个值时, 第二个值默认和第一个值相等

25 25 2. 使用变形属性 2.3 变形子属性 2D 缩放 scale() 函数的取值具体说明如下所示 x: 指定横向坐标方向的缩放向量, 如果值为 0.01~0.99 之间, 会让元素在 X 轴方向缩小, 如果值大于或者等于 1.01, 元素在 X 轴方向放大 y: 指定纵向坐标方向的缩放向量, 如果值为 0.01~0.99 之间, 会让元素在 Y 轴方向缩小, 如果值大于或者等于 1.01, 元素在 Y 轴方向放大如果要使元素仅仅沿着 X 轴或者 Y 轴方向缩放, 而不是同时缩放的话, 可以将函数设置为 scale(x,1) 或 scale(1,y) saclex(n): 相当于 scale(x,1) 元素只在 X 轴缩放元素, 默认值为 1 sacley(n): 相当于 scale(1,y) 元素只在 Y 轴缩放元素, 默认值为 1

26 26 2. 使用变形属性 2.3 变形子属性 2D 旋转旋转方法 roate() 可以通过设定的角度参数对元素实现基于中心原点的 2D 旋转在二维空间内进行操作, 设置角度值, 用来指定元素旋转的幅度如果这个值为正值, 元素相对中心原点顺时针旋转如果这个值为负值, 则元素相对中心原点逆时针旋转 roate() 的具体语法如下所示

27 27 2. 使用变形属性 2.3 变形子属性 2D 倾斜倾斜函数 skew() 能够让元素倾斜显示, 可以将一个元素以其中心原点位置围绕着 X 轴和 Y 轴按照一定的角度倾斜与 rotate() 方法的旋转不同是 rotate() 方法只是旋转元素, 不会改变元素的形状, 其语法如下所示 x-angle: 指定元素水平方向 (X 轴方向 ) 倾斜的角度 y-angle: 指定元素竖直方向 (Y 轴方向 ) 倾斜的角度

28 28 2. 使用变形属性 2.3 变形子属性 2D 倾斜在 X 轴和 Y 轴倾斜之外还可使用 skewx() 和 skewy() 方法让元素只在水平或者竖直方向倾斜 skewx(angle): 相当于 skew(x-angle,0) 按指定的角度沿 X 轴指定一个倾斜变形 skewx() 使元素以其中心点为基点, 并在水平方向 (X 轴 ) 进行倾斜变形 skewy(angle): 相当于 skew(0, y-angle) 按指定的角度沿 Y 轴指定一个倾斜变形 skewy() 使元素以其中心点为基点, 并在垂直方向 (Y 轴 ) 进行倾斜变形

29 29 2. 使用变形属性 2.3 变形子属性 2D 矩阵 CSS3 中 transform 让操作变形时变得很简单, 如位移函数 translate() 缩放函数 scale() 旋转函数 roate() 和倾斜函数 skew(), 这些函数很简单, 也很方便使用, 是 CSS 动画中常用的方法, 但 CSS3 中同时提供了一个矩阵函数 matrix() 在 CSS 中的所有变形方法都可通过 matrix() 方法来实现,matrix() 函数是所有变形函数的基础, 使用它可以开发出更多的变形样式, 而不仅仅局限于位移缩放旋转倾斜等, 具体操作如下

30 30 现场演示 : 案例 13-09: 用 2D 变形方法制作立方体

31 31 2. 使用变形属性 2.4 3D 变形函数 3D 位移 CSS 中的 3D 位移主要由四个函数实现 :translate3d() translatex() translatey() 和 translatez() translate3d() 函数可以使一个元素在三维空间上移动, 变形的原理是通过设置三维向量的坐标, 定义元素在每个方向上移动了多少, 从而实现元素在 3D 空间中的位移, 具体语法如下所示 x: 表示横向坐标位移向量的长度 y: 表示纵向坐标位移向量的长度 z: 表示 Z 轴位移向量的长度

32 32 2. 使用变形属性 2.4 3D 变形函数 3D 位移 translatex() translatey() 和 translatez() 函数则是 translate3d() 函数的简化形式, 分别负责元素在 3D 空间中沿 X Y Z 轴方向位移的功能, 其具体语法如下所示在 translatez(z) 中, 取值 z 指的是 Z 轴的向量位移长度使用 translatez() 方法可以让元素在 Z 轴进行位移当其值为负值时, 元素在 Z 轴上越移越远, 导致元素在越来越小当其值为正值时, 元素在 Z 轴上越移越近, 导致元素在越来越大

33 33 2. 使用变形属性 2.4 3D 变形函数 3D 缩放 CSS 中的 3D 缩放函数主要有 scale3d() scalex() scaley() 和 scalez() 四个, 可以控制元素在三维空间上的缩放 scale3d() 可以控制一个元素在 X Y Z 轴方向的缩放向量, 对元素进行 3D 的缩放变形, 其具体语法如下所示 scalex() scaley() 和 scalez() 是 scale3d() 函数的简化形式, 其语法如下所示

34 34 2. 使用变形属性 2.4 3D 变形函数 3D 旋转在 CSS 中有着四个旋转函数用于实现元素的 3D 旋转, 分别是 : rotate3d() rotatex() rotatey() 和 rotatez() rotate3d() 函数可以通过设置元素在 X Y Z 轴的方向向量和一个旋转角度来控制元素在 3D 空间中的旋转, 其语法如下所示 x:0~1 的数值, 用来描述元素围绕 X 轴旋转的向量值 y:0~1 的数值, 用来描述元素围绕 Y 轴旋转的向量值 z:0~1 的数值, 用来描述元素围绕 Z 轴旋转的向量值 angle: 角度值, 用来指定元素在 3D 空间旋转的角度, 如果其值为正值, 元素顺时针旋转, 反之元素逆时针旋转

35 35 2. 使用变形属性 2.4 3D 变形函数 3D 旋转同样 rotatex() rotatey() 和 rotatez() 是 rotate3d() 的简化形式, 用于设置元素在仅在 X Y Z 方向上的旋转角度, 其语法如下所示 angle 是一个角度值, 其值可以为正值也可以为负值如果值为正值, 元素顺时针旋转如果值为负值, 元素逆时针旋转 rotatex() rotatey() 和 rotatez() 的每个方法的具体功能 : rotatex(angle) 方法的功能等同于 rotate3d(1,0,0,angle) rotatey(angle) 方法的功能等同于 rotate3d(0,1,0,angle) rotatez(angle) 方法的功能等同于 rotate3d(0,0,1,angle)

36 36 2. 使用变形属性 2.4 3D 变形函数 3D 矩阵 CSS 中的 3D 矩阵比 2D 矩阵复杂, 从二维到三维是从 4 到 9, 而在矩阵里是 3*3 变成 4*4, 即 16 对于 3D 矩阵而言, 本质上很多东西与 2D 矩阵是一致的, 只是复杂程度不一样而已, 其语法如下所示

37 37 现场演示 : 案例 13-10: 使用 3D 变形方法制作立方体

38 38 2. 使用变形属性 2.5 案例 : 制作时钟简介时钟是日常生活中一种很常见的工具, 使用 CSS3 中的变形元素可以很好的实现这种功能下面使用 CSS3 实现动态的时钟效果, 全部动画的实现不依赖 Flash 和 JavaScript

39 39 现场演示 : 案例 13-11: 制作时钟

40 40 3. 使用过渡属性 3.1 设置元素过渡 CSS 过渡 (transition) 是通过设定元素起点的状态和结束点的状态, 在一定的时间区间内实现元素平滑地过渡或变化, 是一种补间动画的机制通过过渡属性可以让元素属性的改变过程持续一段时间, 而不立即生效, 从而形成的一种动画效果通过 transition 可以设置哪个属性发生动画效果何时开始动画动画持续多久以及如何动画, 其语法如下所示该属性是一个综合属性, 可设置多个属性值, 实现元素的动画过渡

41 41 现场演示 : 案例 13-12:transition 属性效果展示

42 42 3. 使用过渡属性 3.2 设置过渡元素 transition 属性的工作机制是为元素设置两套样式用于用户与页面的交互, 在过渡属性未触发时是一种样式, 触发后又是一种样式在这个过程中需要指定元素触发后需要改变的属性, 这个值主要通过其子属性 transition-porperty 来指定, 其语法如下所示 transition-porperty 属性的取值说明如下所示 none: 没有指定任何样式 all: 默认值, 表示指定元素所有支持该属性的样式 property: 指定样式名称

43 43 3. 使用过渡属性 3.2 设置过渡元素

44 44 3. 使用过渡属性 3.3 设置过渡持续时间 transision-duration 属性主要用来设置元素从一个属性过渡到另一个属性所需的时间, 即从旧属性过渡的新属性所消耗的时间, 其语法如下所示 time 是数值, 单位为秒 (s) 或者毫秒 (ms), 可以作用于所有的元素, 包括 :before 和 :after 伪元素 transition-duration 属性的默认值为 0, 也就是说元素的属性变换是即时的

45 45 现场演示 : 案例 13-13:transision-duration 与 transition-porperty 属性效果展示

46 46 3. 使用过渡属性 3.4 制定过渡函数过渡函数有两种, 分别是 transition-timing-function() 和 step() transition-timing-function 属性指定元素过渡过程中的缓动函数此属性可指定元素的过渡速度以及过渡期间的操作进展情况, 可以将某个值指定为预定义函数阶梯函数或者三次贝塞尔曲线, 其语法如下所示其值的类型有两种 : 单一类型的过渡函数和三次贝塞尔曲线

47 47 3. 使用过渡属性 3.4 制定过渡函数过渡函数有两种, 分别是 transition-timing-function() 和 step() 单一的过渡函数取值效果如下所示 linear: 元素样式从初始状态过渡到终止状态是恒速 ease: 默认值, 元素样式从初始状态过渡到终止状态时速度由快到慢, 逐渐变慢 ease-in: 元素样式从初始状态到终止状态时速度越来越快, 呈现一种加速状态这种效果称之为渐显效果 ease-out: 元素样式从初始状态到终止状态时, 速度越来越慢, 呈现一种减速状态这种效果称为渐隐效果 ease-in-out: 元素样式从初始状态到终止状态时, 先加速再减速这种效果称为渐显渐隐效果

48 48 3. 使用过渡属性 3.4 制定过渡函数过渡函数有两种, 分别是 transition-timing-function() 和 step() 三次贝塞尔曲线有着多个精确控制点, 可以精确的控制函数的过渡过程, 其语法如下所示需要注意的是, 三次贝塞尔曲线中每个点值只允许 0~1 的值 step() 函数是过渡中的另外一个函数, 可以将整个操作领域划成同样的大小间隔, 每个间隔都是相等的, 该函数还指定发生在开始或者结束的时间间隔是否另外输出, 可采用百分比的形式 ( 如输出百分比为 0% 表示输入变化的初始点 ) step() 方法非常独特, 允许在固定的间隔播放动画, 可以用来制作逐帧动画, 其语法如下所示

49 49 3. 使用过渡属性 3.4 制定过渡函数过渡函数有两种, 分别是 transition-timing-function() 和 step() step() 方法主要包括两个参数第一个参数是一个数值 n, 主要用来指定 step() 方法间隔的数量, 此值必须是一个大于 0 的正整数第二个参数是可选的, 是 start 或 end, 如果第二个参数忽略, 则默认为 end 值

50 50 现场演示 : 案例 13-14:transition-timing-function 属性简单函数效果展示案例 13-15: 使用 cubic-bezier 实现过渡效果

51 51 3. 使用过渡属性 3.5 规定过渡延迟时间 transition-delay 用来指定一个动画开始执行的时间, 也就是说当前元素属性值多长时间后开始执行过渡效果, 其语法如下所示 transition-delay 取值为 time, 它可以是正整数负整数和 0, 非零的时候必须将单位设置为秒 (s) 或者毫秒 (ms) 正整数 : 元素的过渡动作不会被立即触发, 当过了设定的时间值之后才触发负整数 : 元素的过渡动作会从该时间点开始显示, 之前动作被截断 0: 默认值, 元素的过渡动作会立即触发, 没有任何反应

52 52 现场演示 : 案例 13-16:transition-delay 属性效果展示

53 53 3. 使用过渡属性 3.6 过渡触发伪元素触发动画的触发可以使用伪元素触发, 如鼠标指向时触发 (:hover) 用户点击某个元素时触发 (:active) 元素获得焦点状态时触发 (:focus) 以及元素被选中时触发 (:checked) 媒体查询触发属性触发, 能够根据某些元素的更改应用不同的元素样式, 同时也可以用来触发动画 JavaScript 触发如果可以基于 CSS 的状态更改触发 CSS 动画, 自然的可以使用 JavaScript 做到这一点最简单的的方法是通过切换元素的类名称进行 CSS 动画的触发

54 54 现场演示 : 案例 13-17: 通过不同的方法触发过渡动画

55 55 3. 使用过渡属性 3.7 案例 : 制作动态网站导航简介导航是网站中的重要组成部分, 通过导航用户可以了解网站的内容层次结构, 并访问网站的各个部分, 并且美观恰当的导航可以使页面更快的抓住用户的注意力, 提高用户粘度

56 56 现场演示 : 案例 13-18: 制作动态导航

57 57 4. 使用动画属性 4.1 建立基本动画在 CSS3 中, 除了可以使用 transition 功能实现的动画效果外, 还可以通过 animation 功能实现更为复杂的动画效果 animation 功能与 transition 功能基本相同, 都是通过改变元素属性值来实现动画效果的, 其区别在于 : 使用 transition 功能时只能通过指定属性的开始值与结束值, 然后在这两个属性值之间进行平滑过渡的方式实现动画效果, 因此不能实现较为复杂的动画效果使用 animation 功能时, 通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果, 其语法如下所示 :

58 58 现场演示 : 案例 13-19:animation 属性效果展示

59 59 4. 使用动画属性 4.2 动画关键帧 animation 动画创建的原理是, 通过设置关键帧的方式将一套 CSS 样式逐渐变化为另一套样式在动画过程中, 要能够多次改变 CSS 样式, 既可以使用百分比来规定改变发生的时间同时也可以通过关键词 from 和 to 来实现, from 和 to 等价于 0% 和 100% 0% 是动画的开始时间,100% 是动画的结束时间 animation 定义关键帧的语法如下所示

60 60 4. 使用动画属性 4.2 动画关键帧 animation 有自身的语法规则 : 开头, 后面紧跟着是动画名称加上一对花括号 {...}, 括号中是不同时间段的样式规则, 类似于 CSS 的写法中的样式规则是由多个不同的百分比构成的, 如 0%~100%, 可以在这个规则中创建更多的百分比, 分别给每个百分比中需要动画效果的元素加上不同的属性, 从而让元素达到一种不断变化的效果如果使用百分比设置关键帧, 则其中的 % 不能省略, 如果没有加上, 将没有任何效果, 的单位只接受百分比值

61 61 4. 使用动画属性 4.2 动画关键帧 animation 动画创建的原理使用 from to 的方式设置关键帧的代码如下所示

62 62 4. 使用动画属性 4.2 动画关键帧 animation 动画创建的原理使用百分比的方式设置关键帧的代码如下所示

63 63 4. 使用动画属性 4.3 动画子属性 animation-name 属性该属性主要用来调动动画, 关键帧定义好的动画, 其语法如下所示 animation-name 用来定义一个动画的名称, 其主要有两个值 keyframename: 创建的动画名称, 也就是说此处的 keyframename 中的 animationname 一致, 如果不一致将不会实现任何动画效果 none: 默认值, 当值为 none 时, 将没有任何动画效果, 其可以用于覆盖任何动画

64 64 4. 使用动画属性 4.3 动画子属性 aimation-duration 属性该属性主要用来设置 CSS3 动画播放时间, 其用法和 transitionduration 类似, 其语法如下所示 animation-timing-function 属性该属性用来设置动画播放的方式, 其语法如下所示

65 65 4. 使用动画属性 4.3 动画子属性 animation-delay 属性该属性用来定义动画开始播放的时间, 其语法如下所示 animation-iteration-count 属性该属性用来定义动画播放的次数, 其语法如下所示此属性主要用于定义动画播放多少次, 其值通常为整数, 但也可以使用带小数的数字此属性默认值为 1, 这意味着动画从开始到结束只播放一次如果取值为 infinite, 动画将会无限次的播放

66 66 4. 使用动画属性 4.3 动画子属性 animation-direction 属性该属性主要用来设置动画播放的方向, 其语法如下所示 animation-direction 是用来指定元素动画的播放方向的, 其主要有两个值, 分别为 :normal 和 alternate normal: 默认值, 设置为 normal 时, 动画的每次循环都是向前播放 alternate: 动画播放为偶数次是向前播放, 为奇数次则是反向播放

67 67 4. 使用动画属性 4.3 动画子属性 animation-play-state 属性该属性用来控制元素动画的播放状态, 其语法如下所示该属性主要有两个值 :running 和 paused running 属性 : 默认值, 主要作用类似于音乐播放器 paused 属性 : 将正在播放的动画停止下来通过 running 将暂停的动画重新播放, 这里的重新播放不一定是从元素动画的头部开始播放, 也可能是从暂停的那个位置开始播放如果停止了动画的播放, 元素的样式将会回到最初始的设置状态

68 68 4. 使用动画属性 4.3 动画子属性 animation-fill-mode 属性定义动画在开始之前和结束之后发生的操作, 其语法如下所示该属性主要有四个值 :none forwards backwards 和 both none: 默认值, 表示动画将按预期进行和结束, 在动画完成最后一帧时, 动画会反转到初始帧处 forwards: 动画在结束后继续应用最后关键帧的位置 backwards: 向元素应用动画样式时迅速应用动画的初始 both: 元素动画同时具有 forwards 和 backwards 效果

69 69 4. 使用动画属性 4.4 给元素应用动画声明动画声明一个名字为 mymove 的动画, 它的动画经历了从 0% 到 100% 的变化, 其中还有着 25% 50% 75% 三个过程

70 70 4. 使用动画属性 4.4 给元素应用动画声明的动画声明的动画, 在 CSS 中有两种方式 :animation 和 transition animation 类似于 transition 属性, 都是随着时间改变元素的属性值两个属性主要区别是如下 : transition 需要一个触发事件 animation 在不需要任何触发事件的情况下也可以显式的随着时间变化来改变元素的 CSS 属性值, 从而达到一种动画的效果

71 71 4. 使用动画属性 4.5 案例 : 实现页面加载动画页面加载动画是 Web 前端开发中常用的一个动画, 在以前的开发中,Web 前端开发者常使用 GIF 图片制作页面加载动画, 现在通过 CSS3 的 animation 属性可更加简单方便的实现页面加载动画

72 72 现场演示 : 案例 13-20: 实现页面加载动画

73 73 5. 案例 : 引人入胜的动态照片墙

74 74 现场演示 : 案例 13-21: 引人入胜的动态照片墙

75 75

第 9 讲层叠样式表 CSS3 张高川遗传学与生物信息学系基础医学与生物科学学院苏州大学医学部 WX: zhanggaochuan QQ: 苏州大学医学部基础医学与生物科学学院生物信息教研室张高川

第 9 讲层叠样式表 CSS3 张高川遗传学与生物信息学系基础医学与生物科学学院苏州大学医学部 WX: zhanggaochuan QQ: 苏州大学医学部基础医学与生物科学学院生物信息教研室张高川第 9 讲层叠样式表 CSS3 张高川遗传学与生物信息学系基础医学与生物科学学院苏州大学医学部 Email: zhanggaochuan@suda.edu.cn WX: zhanggaochuan770609 QQ: 2257916241 CSS 基础 CSS 选择器 CSS 样式 CSS 定位 CSS 框模型元素本身属性样式 id 或类选择器元素内部嵌套的其他元素样式 id 或类选择器 +