HTML 前端 实例与教程 9

单元8CSS3动画HTML5+CSS3+JavaScriptWeb前端开发实例教程（慕课版）【目录】8.1CSS3过渡8.2CSS3转换8.2.12D转换8.2.23D转换8.3CSS3动画8.3.1@keyframes8.3.2animation属性8.3.3animation-timing-function属性8.3.4animation-fill-mode属性8.3.5animation-direction属性8.3.6animation-play-state属性8.4CSS3媒体查询【商业实例】“仿写淘宝首页”项目——给淘宝首页添加动画效果任务一为轮播图添加左右滑动动画效果任务二为热点模块添加动画效果【综合实训】制作会动的小球动画【单元小结】目录【学习导读】CSS3动画是一种使用CSS3属性和关键帧来创建动态效果的技术。通过定义起始状态和结束状态之间的过渡，可以实现元素的平滑动画效果，而无须使用JavaScript或其他编程语言。通过使用CSS3动画，我们可以为元素添加各种动态效果，如平移、缩放、旋转、淡入淡出等。CSS3动画具有简单易用、性能高效、可与其他CSS3属性和伪类结合使用等特点。合理使用CSS3动画可以提升网页的交互性和视觉吸引力，还可以提升用户体验。本单元将详细介绍CSS3动画的使用方法。学习导读【学习目标】知识目标1．掌握CSS3过渡属性的使用方法。2．掌握CSS3转换属性的使用方法。3．掌握CSS3动画属性的使用方法。能力目标1．掌握媒体查询。2．能够熟练运用CSS3动画属性。素质目标1．培养学生的编程能力。2．培养学生的空间想象能力。3．培养学生的创新能力。学习目标思维导图8.1CSS3过渡比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用CSS3过渡后该元素的颜色将按照一定的曲线速率从白色逐渐变为黑色。这个过程可以自定义。CSS3过渡属性CSS3过渡提供了一种在更改CSS3属性时控制动画速度的方法。其可以让属性变化成为持续一段时间的过程，而不是立即生效。属性描述transition简写属性，用于在一个属性中设置4个过渡属性transition-property规定应用过渡的

CSS

属性的名称transition-duration定义过渡效果花费的时间，默认是

0transition-timing-function规定过渡效果的时间曲线，默认是

easetransition-delay规定过渡效果何时开始，默认是

08.1CSS3过渡例如给元素添加大小和颜色变换的过渡效果，代码如下所示（实例位置：单元8/8-1.html）。运行效果8.2CSS3转换8.2.12D转换通过设置transform属性，可以指定元素的2D转换效果。该属性有多个值，包括translate（平移）、rotate（旋转）、scale（缩放）和skew（倾斜）等。AB2D转换是指在二维平面上对元素进行变换操作。通过使用CSS3的2D转换属性，可以实现元素的平移、旋转、缩放和倾斜等变换效果。8.2CSS3转换8.2.12D转换函数描述matrix(n,n,n,n,n,n)2D

转换，使用6个值的矩阵translate(x,y)2D

转换，沿着

X

和

Y

轴移动元素translateX(n)2D

转换，沿着

X

轴移动元素translateY(n)2D

转换，沿着

Y

轴移动元素scaleX(n)2D

缩放转换，改变元素的宽度scaleY(n)2D

缩放转换，改变元素的高度rotate(angle)2D旋转，angle表示旋转角度skew(x-angle,y-angle)2D

倾斜转换，沿着

X

和

Y

轴skewX(angle)2D

倾斜转换，沿着

X

轴skewY(angle)2D

倾斜转换，沿着

Y

轴2D转换函数8.2CSS3转换8.2.23D转换3D转换是指在三维空间中对元素进行变换操作。通过使用CSS3的3D转换属性，可以实现元素的平移、旋转、缩放和倾斜等三维变换效果。通过设置transform属性，可以指定元素的3D转换效果。该属性有多个值，包括translate3d（平移）、rotate3d（旋转）、scale3d（缩放）和matrix3d（矩阵变换）等。8.2CSS3转换8.2.23D转换3D转换方法函数描述matrix3d(n,n,n,n,n,n,

n,n,n,n,n,n,n,n,n,n)3D

转换，使用

4x4的

矩阵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

轴的值。8.2CSS3转换8.2.23D转换3D转换方法函数描述scaleZ(z)3D

缩放转换，给定一个

Z

轴的值rotate3d(x,y,z,angle)3D

旋转rotateX(angle)定义沿

X

轴的

3D

旋转rotateY(angle)定义沿

Y

轴的

3D

旋转rotateZ(angle)定义沿

Z

轴的

3D

旋转perspective(n)3D

转换元素的透视视图8.2CSS3转换8.2.23D转换例如给元素添加翻转效果，代码如下所示（实例位置：单元8/8-2.html）。运行效果AB8.3CSS3动画8.3.1@keyframes@keyframes规则用于创建动画，@keyframes规则指定CSS3样式从旧样式更改为新样式的过程。@keyframes规则一般需要建立两个或两个以上的关键帧，每一个关键帧都描述了动画元素在给定的时间点上该如何渲染。8.3CSS3动画8.3.2animation属性animation属性用来配置动画规则和应用动画，animation属性有多个值，如表所示。可以为动画指定唯一的名称，以便在其他地方引用动画。属性描述animation所有动画属性（除了animation-play-state属性）的简写属性animation-name用于设置@keyframes动画的名称animation-duration用于设置一个动画周期持续的秒或毫秒，默认是0animation-timing-function用于设置动画的速度曲线，默认是easeanimation-fill-mode用于设置动画前后的元素的样式animation-delay用于设置动画何时开始，默认是0animation-iteration-count用于设置动画播放的次数，默认是1。infinite表示无限循环animation-direction用于设置动画的播放方向，默认是normalanimation-play-state用于设置动画的播放状态，默认是running动画属性8.3CSS3动画8.3.3animation-timing-function属性animation-timing-function属性用来指定动画的速度曲线，即元素从一种样式变为另一种样式的速度。其取值如表所示。animation-timing-function属性的取值值描述linear动画从头到尾的速度是相同的ease默认值。动画以低速开始，然后加快，在结束前变慢ease-in动画以低速开始ease-out动画以低速结束ease-in-out动画以低速开始和结束step-start只显示动画第一帧step-end只显示动画最后一帧cubic-bezier(n,n,n,n)定义贝塞尔曲线的函数，它通过4个数值精确控制动画的速度变化8.3CSS3动画8.3.4animation-fill-mode属性animation-fill-mode属性用于指定动画播放前和播放后的元素样式。通过设置animation-fill-mode属性，我们可以控制动画开始前和结束后元素的样式。该属性的取值如表所示。animation-fill-mode属性的取值值描述none默认值。动画开始前和结束后不会应用任何样式到目标元素forwards动画结束后（由animation-iteration-count属性决定）元素保留最后一个关键帧的样式属性值backwards动画开始前元素应用第一个关键帧的样式both动画同时应用forwards和backwards的样式8.3CSS3动画8.3.5animation-direction属性animation-direction属性用于指定动画播放的方向。通过设置animation-direction属性，我们可以控制动画是正向播放还是反向播放。该属性的取值如表所示。animation-direction属性的取值值描述normal默认值。动画正常播放reverse动画反向播放alternate动画在奇数次正向播放，在偶数次反向播放alternate-reverse动画在奇数次反向播放，在偶数次正向播放8.3CSS3动画8.3.6animation-play-state属性animation-play-state属性有两个值，running和paused，如表所示。默认值为running。animation-play-state属性值animation-play-state属性用于控制动画的播放状态。通过设置animation-play-state属性，我们可以暂停或恢复动画的播放。值描述paused暂停动画的播放running播放动画8.3CSS3动画8.3.6animation-play-state属性例如给元素添加移动变色动画，代码如下所示（实例位置：单元8/8-3.html）。运行效果8.4CSS3媒体查询CSS3媒体查询用于根据设备的特性和特定条件来应用不同的样式规则。通过使用CSS3媒体查询，我们可以根据设备的屏幕尺寸、分辨率等参数，应用合适的样式。媒体查询使用@media规则来定义，并可以包含一个或多个条件。每个条件由媒体类型和一个或多个媒体特性组成。媒体类型可以是all、screen、print等，用于指定适用的设备类型。媒体特性可以是width、height、orientation等，用于指定设备或视口的特定属性。8.4CSS3媒体查询媒体查询语法如下。@medianot|onlymediatypeand(expressions){CSS代码...;}媒体类型值描述all用于所有多媒体类型设备print用于打印机screen用于电脑屏幕，平板，智能手机等speech用于屏幕阅读器8.4CSS3媒体查询媒体参数类型值描述notnot是用来排除掉某些特定的设备的，比如

@media

not

print（非打印设备）only用来定某种特别的媒体类型。对于支持Media

Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media

Queries的设备但能够读取Media

Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。all所有设备，这个应该经常看到。可在引入样式文件的时候判断媒体类型，针对不同类型引入不同的样式，语法如下。<linkrel="stylesheet"media="mediatypeand|not|only(expressions)"href="print.css">8.4CSS3媒体查询例如给元素添加媒体查询，屏幕越大显示的内容越多，代码如下所示（实例位置：单元8/8-4.html）。8.4CSS3媒体查询例如给元素添加媒体查询，屏幕越大显示的内容越多，代码如下所示（实例位置：单元8/8-4.html）。运行效果【商业实例】“仿写淘宝首页”项目——给淘宝首页添加动画效果任务一为轮播图添加左右滑动动画效果01OPTION样式分析淘宝轮播图模块如图所示，其中显示的图片每隔一段时间会自动切换，并且会无限循环切换。要实现该效果，需要给轮播图父节点容器添加一个animation动画样式属性