私立华联学院：《html5》课程教学资源（课件讲稿）第9章 CSS3高级应用

第9章CSS3高级应用 .CSS3过渡 CSS3变形 HTML5 .CSS3动画

让IT教学更简单，让IT学习更有效 第9章 CSS3高级应用 HTML5 ·CSS3过渡 ·CSS3变形 ·CSS3动画 HTML5

学习目标 理解过渡属性，能够控 掌握CSS3中的变形属 制过渡时间、动画快慢 性，能够制作2D转换、 等常见过渡效果。 3D转换效果： 掌握 掌握 掌握CSS3中的动画， 能够熟练制作网页中常 见的动画效果

✎ ✎ 学习目标 掌握 理解过渡属性，能够控 制过渡时间、动画快慢 等常见过渡效果。 1 掌握CSS3中的变形属 性，能够制作2D转换、 3D转换效果。 2 掌握CSS3中的动画， 能够熟练制作网页中常 3 见的动画效果

四目录 过渡 9.1 ●444444444444444小44444444444小意 ,点击查看本小节知识架构 变形 点击查看本小节知识架构 动画 9.3 一点击查看本小节知识架构 阶段案例一制作工作日天气预报 9.4 ￥ 9

✎  目录 变形 ☞点击查看本小节知识架构 动画 ☞点击查看本小节知识架构 阶段案例—制作工作日天气预报 过渡 ☞点击查看本小节知识架构

四知识架构 →返回目录 9.1过渡 9.1.1 transition-property)属性 9.1.2 transition-duration,属性 9.1.3…。transition-timing-function属性 9.1.4。transition-delay)属性 9.1.5 transition属性 带0·丝

✎  知识架构 9.1 过渡 9.1.1 9.1.2 9.1.3 transition-property属性 transition-duration属性 transition-timing-function属性 9.1.4 9.1.5 transition-delay属性 transition属性

→返回目录 9.2变形 9.2.1……。认识transform 9.2.2………。 2D转换 9.2.3 3D转换 y

✎ 9.2 变形 9.2.1 9.2.3 认识transform 9.2.2 2D转换 3D转换

返回目录 9.3动画 9.3.1 … @keyframes 9.3.2…0 animation-name属性 9.3.3.0 animation-duration属性 9.3.40 animation-timing-function属性 9.3.5 animation-delay)属性 9.3.6…。animation-iteration-count/属性 9.3.7 …… animation-direction,属性 9.3.8…● animation)属性

✎ 9.3 动画 9.3.1 @keyframes 9.3.2 animation-name属性 9.3.3 animation-duration属性 9.3.4 animation-timing-function属性 9.3.5 animation-delay属性 9.3.6 animation-iteration-count属性 9.3.7 animation-direction属性 9.3.8 animation属性

CSS3高级应用 在传统的Web设计中，当网页中需要显示动画或特效时，需要使 用avaScript脚本或者Flash来实现。在CSS3中，提供了对动画 的强大支持，可以实现旋转、缩放、移动和过渡等效果。 UBIC BEZIE,077 本章将对CSS3中的过渡、变形和动画进行详细讲解

✎ CSS3高级应用 在传统的Web设计中，当网页中需要显示动画或特效时，需要使 用JavaScript脚本或者Flash来实现。在CSS3中，提供了对动画 的强大支持，可以实现旋转、缩放、移动和过渡等效果。 本章将对CSS3中的过渡、变形和动画进行详细讲解

9.1过渡 CSS3提供了强大的过渡属性， 它可以在不使用Flashi动画或 Link 者lavaScript脚本的情况下， Link 为元素从一种样式转变为另一 Link 种样式时添加效果，例如渐显 START Link 渐弱、动画快慢等。 2 FINISH 9

✎ 9.1 过渡 CSS3提供了强大的过渡属性， 它可以在不使用Flash动画或 者JavaScript脚本的情况下， 为元素从一种样式转变为另一 种样式时添加效果，例如渐显、 渐弱、动画快慢等

9.1过渡 9.1.1 transition-property属性 transition-property属性用于指定应用过渡效果的CSS属性的名称。 基本语法格式 transition-property:none all property; 属性值 描述 none 没有属性会获得过渡效果。 all 所有属性都将获得过渡效果。 property 定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔

✎ 9.1.1 transition-property属性 transition-property 属性用于指定应用过渡效果的CSS属性的名称。 基本语法格式 transition-property: none | all | property; 属性值 描述 none 没有属性会获得过渡效果。 all 所有属性都将获得过渡效果。 property 定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔。 9.1 过渡

9.1过渡 9.1.2 transition-duration属性 transition-duration,属性用于定义过渡效果花费的时间，默认值为O, 常用单位是秒(s)或者毫秒(ms)。 基本语法格式 transition-duration:time;

✎ 9.1.2 transition-duration属性 transition-duration属性用于定义过渡效果花费的时间，默认值为0， 常用单位是秒（s）或者毫秒（ms）。 基本语法格式 transition-duration:time; 9.1 过渡