任务10使用CSS3实现动画效果教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版

任务10 使用CSSS3实现动画效果 Web前端开发案例教程 HTML5+CSS3 微课版 为了追求更好的网页浏览与交互体验,用户对网站的美观性和交互性的要求越来越高。CSS3不仅可以实现页面的基本样式,还可以提供对动画的强大支持,可以实现旋转、缩放、移动和过渡等效果，提高用户的体验。本任务的使用CSS3的过渡、变形等属性制作照片墙的动画效果。通过本任务的实现，掌握使用CSS3实现动画效果的各种方法。 任务导学 2 使用CSS3实现动画效果 任务10 任 务 描 述 制作照片墙页面，具体要求如下。 （1）在页面中放入六张图片，图片大小240px*240px。鼠标指针移动到每张图片上时，显示不同的动画效果。 （2）鼠标指针移动到第一张图片上时，将图片变为圆形。 （3）鼠标指针移动到第二张图片上时，逆时针旋转60度。 （4）鼠标指针移动到第三张图片上时，顺时针旋转360度。 （5）鼠标指针移动到第四张图片上时，给照片添加阴影并且逆时针旋转10度。 （6）鼠标指针移动到第五张图片上时，产生3D变形、沿Y轴旋转180度。 （7）鼠标指针移动到第六张图片上时，将照片放大1.2倍。 任务描述 4 任务效果 制作照片墙页面，浏览效果如图10-1、10-2所示。 图10-1　初始照片效果 图10-2　鼠标指针移动到第一张照片上的效果 5 知识点 过渡属性 01 变形属性 02 动画属性 03 使用CSS3实现动画效果 任务10 知 识 准 备 如果直接变化就如同两张图片直接相互转换，不美观。 10.2.1 过渡属性 为了能更好的体现出一个状态向另一个状态变化的过程。 在制作照片墙时我们需要把图片旋转甚至变形。 有什么好办法吗? 10.2.1 过渡属性 这就好比我们让块元素由一种颜色渐变成另一种颜色的过程。 我们需要体现出颜色渐变时的状态。 CSS3提供了强大的过渡属性，在元素从一种样式转变为另一种样式时添加效果，如颜色和形状的变换等。 10.2.1 过渡属性 过渡效果使用过渡属性transition来定义，过渡属性是一个复合属性，它包含一系列子属性，主要包括transition-property、transition-duration、transition-timing-function、transition-delay等。表10-1所示为过渡属性的含义。 属性名 作用 属性值 描述 transition-property 指定应用过渡效果的CSS属 性名称 none 没有属性会获得过渡效果 all 所有属性都将获得过渡效果 property 定义应用过渡效果的CSS属性名称，多个名称之 间以逗号分隔 transition-duration 定义过渡效果花费的时间 time 默认为0，常用单位是秒（s）或毫秒（ms） transition-timing-function 定义过渡效果的速度曲线 Ease 慢速开始，中间变快，最后慢速结束的过渡效果， 默认值 Linear 以相同速度开始至结束的过渡效果 ease-in 慢速开始，逐渐加快的过渡效果 ease-out 慢速结束的过渡效果 ease-in-out 慢速开始和结束的过渡效果 cubic-bezier 特殊的立方贝塞尔曲线效果，它的值在0-1之间 transition-delay 定义过渡效果延迟时间 time 默认值为0，常用单位是秒（s）或毫秒（ms） transition 综合设置过渡的所有属性值 property duration timing-function delay 按照各属性顺序用一行代码设置4个参数值，属 性顺序不能颠倒 10.2.1 过渡属性 例10-1 在HBuilderX中，新建空项目，项目名称为chapter10，在项目内新建网页文件，使用transition的子属性设置过渡效果，文件名为example01.html，代码如下。 10.2.1 过渡属性 代码中设置了应用过渡效果的属性、过渡效果花费的时间、过渡方式和延迟时间，当鼠标指针经过块元素时，背景颜色产生过渡效果，如图10-3和图10-4所示。 图10-3 鼠标指针未经过块元素时的预览效果 图10-4 鼠标指针经过块元素时的预览效果 10.2.1 过渡属性 上述样式代码中，分别设置了transition-property、transition-duration、transition-timing-function和transition-delay属性，为了简化代码，可使用transition属性进行综合设置，只需一行代码，代码如下。 使用transiton属性设置过渡效果时，它的各个参数必须按