《网页设计与制作》第9章.pptxVIP

《网页设计与制作》主讲人：XXX邮箱：XXXXXXXXXXX电话：XXXXXXXXXXXX

每讲一语Thefirstthingistostopcomplaining.Thehappiestpeoplearetheoneswhodon’tcomplain首先就是要停止抱怨。只有不抱怨的人，才是最快乐的人。

书本内容引导解读

（重点）学习目标第9章CSS高级应用一、CSS动画设计二、CSS行为特效三、CSS高级技术

（重点）9.1CSS动画设计9.1.1CSS动画属性9.1.2CSS2D转换9.1.3CSS3D转换

（重点）9.1.1CSS动画设计1.@keyframes规则@keyframesanimationName{???keyframes-selector{????css-Styles;???}??}@keyframes规则的语法如下所示。关键字描述animationName必需的。定义animation的名称keyframes-selector必需的。动画持续时间的百分比合法值：0-100%；from(和0%相同)；to(和100%相同)注意：?您可以用一个动画keyframes-selectorscss-Styles必需的。一个或多个合法的CSS样式属性

（重点）9.1.1CSS动画设计2.animation动画animation规则的语法如下所示:标记符{animation:namedurationtiming-functiondelayiteration-countdirectionfill-modeplay-state;}名称完成时间周期延迟时间播放次数播放方向不播放时状态是否运行

（重点）9.1.1CSS动画设计3.@keyframes规则效果图

（重点）9.1.2CSS2D转换属性描述transform向元素应用2D或3D转换方法transform-origin允许你改变被转换元素的位置属性值描述translate(x,y)定义2D转换，沿着X和Y轴移动元素。translateX(n)定义2D转换，沿着X轴移动元素。translateY(n)定义2D转换，沿着Y轴移动元素。scale(x,y)定义2D缩放转换，改变元素的宽度和高度。scaleX(n)定义2D缩放转换，改变元素的宽度。scaleY(n)定义2D缩放转换，改变元素的高度。rotate(angle)定义2D旋转，在参数中规定角度。skew(x-angle,y-angle)定义2D倾斜转换，沿着X和Y轴。skewX(angle)定义2D倾斜转换，沿着X轴。skewY(angle)定义2D倾斜转换，沿着Y轴。1.CSS2D属性和属性值

（重点）9.1.2CSS2D转换2.CSS2D效果图

（重点）9.1.3CSS3D转换属性描述transform向元素应用2D或3D转换。transform-origin允许你改变被转换元素的位置。transform-style规定被嵌套元素如何在3D空间中显示。perspective规定3D元素的透视效果。perspective-origin规定3D元素的底部位置。backface-visibility定义元素在不面对屏幕时是否可见。如旋转元素后，不希望看见其另一面，则可使用该属性。1.CSS3D属性

（重点）9.1.3CSS3D转换函数描述translate3d(x,y,z)定义3D转化。translateX(x)定义3D转化，仅使用用于X轴的值。translateY(y)定义3D转化，仅使用用于Y轴的值。translateZ(z)定义3D转化，仅使用用于Z轴的值。scale3d(x,y,z)定义3D缩放转换。scaleX(x)定义3D缩放转换，通过给定一个X轴的值。scaleY(y)定义3D缩放转换，通过给定一个Y轴的值。scaleZ(z)定义3D缩放转换，通过给定一个Z轴的值。rotate3d(x,y,z,angle)定义3D旋转。rotateX(angle)定义沿X轴的3D旋转。rotateY(angle)定义沿Y轴的3D旋转。rotateZ(angle)定义沿Z轴的3D旋转。pe