第8章 全新的网页视听技术（新）.ppt

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 8.4 【案例30】宝石旋转 过渡和变形只能设置元素的变换过程，并不能对过程中的某一环节进行精确控制，例如过渡和变形实现的动态效果不能够重复播放。为了实现更加丰富的动画效果，CSS3提供了animation属性，使用animation属性可以定义复杂的动画效果。本节将通过宝石旋转案例演示设置动画的技巧。 宝石旋转效果图 8.4 【案例30】宝石旋转 案例效果图 8.4 【案例30】宝石旋转 知识引入 宝石旋转案例知识 8.4 【案例30】宝石旋转 1、@keyframes规则 在CSS3中，@keyframes规则用于创建动画。 基本语法格式 @keyframes animationname { keyframes-selector{css-styles;} } animationname：表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。 keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。 css-styles：定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空。 8.4 【案例30】宝石旋转 2、animation-name属性 animation-name属性用于定义要应用的动画名称。 基本语法格式 animation-name: keyframename | none; animation-name 属性初始值为none，适用于所有块元素和行内元素。keyframename参数用于规定需要绑定到选择器的keyframe的名称，如果值为none，则表示不应用任何动画，通常用于覆盖或者取消动画。 8.4 【案例30】宝石旋转 3、animation-duration属性 animation-duration属性用于定义整个动画效果完成所需要的时间，以秒或毫秒计。 基本语法格式 animation-duration: time; animation-duration 属性初始值为0，适用于所有块元素和行内元素。time参数是以秒（s）或者毫秒（ms）为单位的时间，默认值为0，表示没有任何动画效果。当值为负数时，则被视为0。 8.4 【案例30】宝石旋转 4、animation-timing-function属性 animation-timing-function用来规定动画的速度曲线，可以定义使用哪种方式来执行动画效果。 基本语法格式 animation-timing-function:value; animation-timing-function包括linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)等常用属性值。 8.4 【案例30】宝石旋转 4、animation-timing-function属性 animation-timing-function的常用属性值 属性值 描述 linear 动画从头到尾的速度是相同的。 ease 默认。动画以低速开始，然后加快，在结束前变慢。 ease-in 动画以低速开始。 ease-out 动画以低速结束。 ease-in-out 动画以低速开始和结束。 cubic-bezier(n,n,n,n) 在cubic-bezier函数中自己的值。可能的值是从0到1的数值。 8.4 【案例30】宝石旋转 5、animation-delay属性 animation-delay属性用于定义执行动画效果之前延迟的时间，即规定动画什么时候开始。 基本语法格式 animation-delay:time; 参数time用于定义动画开始前等待的时间，其单位是秒或者毫秒，默认属性值为0。animation-delay属性适用于所有的块元素和行内元素。 8.4 【案例30】宝石旋转 6、animation-iteration-count属性 animation-iteration-count属性用于定义动画的播放次数 基本语法格式 animation-iteration-count: number | infinite; animation-iteration-count属性初始值为1，适用于所有的块元素和行内元素。如果属性值为number，则用于定义播放动画的次数；如果是infinite，则指定动画循环播