HTML5 CSS3 Web前端开发项目化教程 课件 项目7 动画页面制作；项目8 响应式布局

《HTML5+CSS3Web前端开发项目化教程》

项目7动画页面制作任务7.3制作“科普世界”模块03目录Contents任务7.2制作“漫游科技馆”模块02任务7.1制作“中国梦”主页头部轮播动画模块01任务7.4制作页脚模块04教学目标掌握transition过渡属性掌握transform变形属性掌握animation动画属性熟悉iconfont图标库的使用方法1.知识目标能够为元素设置过渡效果

能够为元素设置变形效果

能够创建并使用动画

能够在页面中使用iconfont图标2.技能目标树立科技强国意识

培养精益求精、力求创新的精神

遵守代码规范性要求，养成良好的代码编写习惯3.素养目标1任务7.1制作“中国梦”主页头部轮播动画模块效果展示animation-duration：动画完成时间2animation-timing-function：速度曲线3animation-name：动画名称1animation-iteration-count：动画播放次数5animation-direction：动画方向6animation-delay：延迟时间4animation：综合设置动画7知识储备-animation属性@keyframesanimationname{keyframes-selector{css-styles;}}

当前动画的名称

关键帧选择器，指定当前关键帧要应用到整个动画过程中的位置，百分比，from或to

定义执行到当前关键帧时对应的动画状态，CSS样式属性定义知识储备-animation属性1.@keyframes创建动画@keyframes规则用于创建动画，animation属性只有配合@keyframes规则才能实现动画效果。@keyframes规则

当前动画的名称定义执行到当前关键帧时对应的动画状态

关键帧选择器知识储备-animation属性1.@keyframes规则知识储备-animation属性2.animation属性animation-name属性用于定义使用@keyframes定义的动画的名称。1.animation-nameanimation-name:keyframename|none;知识储备-animation属性2.animation属性animation-duration属性用于定义整个动画效果完成所需要的时间。time常用单位为秒（s）或毫秒（ms）。2.animation-durationanimation-duration:time;知识储备-animation属性2.animation属性animation-timing-function用来规定动画的速度曲线，可以定义使用哪种方式来执行动画效果。3.animation-timing-functionanimation-timing-function:value;属性值描述linear表示过渡过程均匀变化。ease默认值。初始速度同linear一致，然后加快，最后慢慢结束。ease-in表示以慢速开始，然后逐渐加快（淡入效果）ease-out表示以快速开始，然后逐渐减速（淡出效果）ease-in-out表示以慢速开始、中间加快、结束前减速cubic-bezier(n,n,n,n)在cubic-bezier函数中自己的值。取值范围一般是从0到1的数值。知识储备-animation属性2.animation属性animation-delay属性用于定义执行动画效果之前延迟的时间，也就是规定动画什么时候开始。4.animation-delayanimation-delay:time;

定义动画开始前延迟的时间知识储备-animation属性2.animation属性animation-iteration-count属性用于定义动画的播放次数。5.animation-iteration-countanimation-iteration-count:number|infinite;

播放动画的次数

指定动画循环播放知识储备-animation属性2.animation属性定义当前动画播放的方向，即动画播放完成后是否逆向交替循环。6.animation-directionanimation-direction:normal|reverse|alternate|alternative-reverse;

动画正常播放alternate属性值会使动画在奇数次数（1、3、5等）正常播放，而在偶数次数（2、4、6等）逆向播放

反方向播放动画

奇数次逆向播放，偶数次正向播放知识储备-animation属性2.animation属性animation属性是一个复合属性，用于在一个属性中综合设置以上六个属性。使用animation属性时必须指定animation-name和animation-duration属性，否则持续的时间为0，动画永远不会播放。7.animationanimation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction;知识储备-animation属性2.animation属性实例解析animation属性的用法动画效果鼠标放到box上时，小球延迟1s无限次的匀速来回运动，持续时间为3s。animation-name:slide;/*动画名称为slide*/animation-duration:3s;/*动画持续时间为3s*/animation-timing-function:linear;/*速度曲线为linear*/animation-delay:1s;/*动画延迟时间为1s*/animation-iteration-count:infinite;/*循环播放*/animation-direction:alternate;/*奇数正向播放、偶数逆向播放*/animation:slide2slinear1sinfinitealternate;设置哪些属性？1.创建动画知识储备1.用@keyframes创建动画@keyframes：创建动画animation-name

：动画名称animation-duration

：动画完成时间animation-timing-function

：速度曲线animation-delay：延迟时间animation-iteration-count：动画播放次数animation-direction：动画方向animation：复合属性总结任务分析<header>div.topdiv.bottom<footer>任务实施任务实施2任务7.2制作“漫游科技馆”模块效果展示知识储备可以使元素从一种样式转变为另一种样式时看起来比较平滑，例如渐显、渐隐等。为什么使用过渡？transition属性知识储备transition-duration属性：持续时间2transition-timing-function属性：速度曲线3transition-property属性：过渡属性1transition属性5transition-delay属性：延迟时间4transition属性知识储备transition属性transition-property属性是设置应用过渡的CSS属性，例如，宽度属性、背景属性等。1.transition-propertytransition-property:none|all|property;示例：transition-property：color；

没有任何CSS属性有过渡效果

所有CSS属性都有过渡效果

应用过渡效果的CSS属性名称知识储备transition属性transition-duration属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）2.transition-durationtransition-duration:time;示例：transition-duration：2s；知识储备transition属性transition-timing-function属性规定过渡效果的速度曲线，默认值为“ease“。3.transition-timing-functiontransition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);知识储备transition属性属性值描述linear指定以相同速度开始至结束的过渡效果。ease指定以慢速开始，然后加快，最后慢慢结束的过渡效果ease-in指定以慢速开始，然后逐渐加快（淡入效果）的过渡效果ease-out指定以慢速结束（淡出效果）的过渡效果。ease-in-out指定以慢速开始和结束的过渡效果。cubic-bezier(n,n,n,n)定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0~1之间。transition-timing-function属性的取值transition-timing-function属性规定过渡效果的速度曲线，默认值为“ease“。3.transition-timing-function知识储备transition属性transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。4.transition-property基本语法格式transition-delay:time;正数:过渡动作会延迟触发。负数：过渡动作会从该时间点开始，之前的动作被截断。示例：transition-delay：1s；知识储备transition属性transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。5.transition基本语法格式transition：propertydurationtiming-functiondelay;使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。例如：transition:border-radius5sease-in-out2s;知识储备transition属性使用过渡需要满足以下两个条件：元素必须具有状态变化；必须为每个状态设置不同的样式-样式变化。知识储备transition属性实例解析transition属性的用法动画效果动画效果为鼠标指针放到div上延迟1s后，div形状和颜色在2s内逐渐变化，过渡效果为以慢速开始，然后逐渐加快。transition-property：形状、颜色；transition-duration：2s；transition-timing-function：ease-in；transition-delay：1s；transition:all2sease-in1s;设置哪些属性？状态变化？知识导图任务分析任务7.2制作“中国梦”页面——漫游科技馆模块鼠标放到a上时，div.cur逐渐显示，怎么实现？可以调整div.cur的位置，刚开始在左侧隐藏，鼠标放到a上时，div.cur位置正常，并使用过渡逐渐显示div.bottomdiv.cura>img<h3><span><h2>任务实施任务实施3任务7.3制作“科普世界”模块效果展示任务7.3制作“科普世界”模块知识储备在CSS3之前，如果需要为页面设置变形效果，需要依赖于图片、Flash或JavaScript才能完成。CSS3出现后，通过transform属性就可以实现变形效果，包括元素的缩放、旋转、移动、倾斜等变形效果。平移缩放旋转倾斜CSS3的变形（transform）属性可以让元素在一个坐标系统中变形。基本语法格式transform：none|transform-functions;知识储备transform属性

默认值，表示不进行变形

变形函数，可以是一个或多个变形函数列表知识储备transform属性在CSS3中，使用scale()可以实现元素缩放效果。该函数包含两个参数值，分别用来定义宽度和高度的缩放比例。缩放transform:scale(x,y);x、y分别指元素宽度和高度的缩放倍数。x、y可以是整数、负数和小数，取值绝对值大于1表示放大元素，取值绝对值小于1表示缩小元素，取值为负数表示反转元素。如果y值省略，则高度和宽度的缩放倍数相同知识储备transform属性在CSS3中，使用rotate()可以旋转指定的元素对象。旋转transform:rotate(angle);参数angle表示旋转的角度，角度单位为deg。角度为正时，按照顺时针方向旋转；角度为负时，按照逆时针方向旋转。知识储备transform属性平移是指元素位置的变化，包括水平移动和垂直移动。在CSS3中，使用translate()可以实现元素的平移效果。平移transform:translate(x,y);注意：x指元素在水平方向上移动的距离，y指元素在垂直方向上移动的距离。x、y值为带有长度单位标志符的数值，可以取0、正值和负值：若取值为正，则表示向右或向下移动；若取值为负，则表示向左或向上移动。知识储备transform属性在CSS3中，使用skew()可以实现元素倾斜效果。两个参数值分别用来定义X轴和Y轴坐标倾斜的角度。如果省略了第二个参数，则取默认值0。倾斜transform:skew(x-value,y-value);注意：参数x-angle和y-angle表示角度值，x-angle表示相对于X轴进行倾斜，y-angle表示相对于Y轴进行倾斜，如果省略了y-angle，则取默认值0。知识储备transform属性transform可以设置多个变形函数，多个函数之间用空格间隔。多种变形transform:rotate(30deg)scale(1.2)；示例：知识储备transform属性变形操作默认是以元素的中心点为基准原点进行的，如果要改变原点位置，则可以使用transform-origin属性来指定，这可以增加变形的灵活性。定义变形原点transform-origin:xy;注意：x表示定义变形原点x坐标位置，默认值为50%，取值可以为left、center、right、长度值、百分比；y表示定义变形原点y坐标位置，取值可以为top、center、bottom、长度值、百分比。湖州职业技术学院/知识储备变形示例知识导图任务分析a>img视频的高度为两个a的高度+之间的距离视频的宽度为3个a的宽度+之间的距离<h2>div.top<video>任务实施任务实施4任务7.4制作页脚模块效果展示知识储备iconfont图标库使用iconfont阿里巴巴矢量图标库官网（/）任务分析li>iconfont图标鼠标放到li上，iconfont图标有变化，这怎么实现？修改li正常状态和鼠标放到li上时的阴影效果变化是有过渡效果<footer><ol>任务实施任务实施技能拓展拓展任务：使用过渡、变形属性制作动态效果，鼠标放到图像所在窗口，底部“风景如画”文字从底部逐渐出现，“点赞”文字从底部到中间位置，图像放大到1.2倍，效果如图所示。技能拓展拓展任务：动画关键帧在0%时旋转到90deg，40%时旋转到-10deg，，70%时旋转到10deg，100%时旋转到0deg。动画的执行时间为2s循环播放。THANKYOU《HTML5+CSS3Web前端开发项目化教程》

项目8响应式布局任务8.3制作“茶具展示”模块03目录Contents任务8.2制作“导航菜单”模块02任务8.1茶文化页面整体布局01教学目标了解响应式布局的概念掌握响应式布局实现步骤掌握Flex布局相关属性1.知识目标能够书写媒体查询语句

能够使用Flex属性进行响应式布局

能够使用AI模型工具生成并修改代码2.技能目标 培养审美意识，提高审美能力

培养勇于创新、敢于实践的精神

培养自主学习和独立解决问题的能力3.素养目标1任务8.1茶文化页面整体布局效果展示中国是茶的故乡，中华茶文化源远流长，博大精深。本项目以“茶文化”为主题，来制作响应式页面。本次任务完成页面整体布局。知识储备AI大模型2响应式布局1目录Contents知识储备1.响应式布局响应式布局是一种网页设计和开发的技术方法，它的目的是使网页能够根据访问设备的不同（如桌面显示器、平板电脑、智能手机或其他手持设备）自动调整布局、图片大小、导航菜单以及其他界面元素，从而提供一致且优化的用户体验。知识储备1.响应式布局（1）流体布局：通过百分比单位而非固定像素来定义元素的宽度和高度，使得页面元素可以根据容器的大小按比例伸缩。（2）媒体查询：利用CSS3的媒体查询功能，可以为不同的设备和屏幕尺寸定义不同的样式表规则，使得样式能够根据设备的具体条件（如视口宽度）发生变化。（3）自适应图像：根据设备的屏幕尺寸和分辨率加载合适大小的图片资源，以减少加载时间和流量消耗。（4）可折叠/隐藏的内容区域：对于较小的屏幕，某些非关键内容可以被折叠或完全隐藏，仅在用户需要时显示，这样可以保持界面的简洁性和易读性。（5）字体适配：根据屏幕尺寸自动调整字体大小，保证在不同设备上的可读性。响应式布局的关键技术手段知识储备2.AI大模型1.OpenAI的GPT系列GPT-3：可以生成连贯的文本、解答问题、编写代码。GPT-4：并且能够处理更多种类的数据输入，包括图像、音频等多媒体信息。知识储备2.AI大模型阿里云的通义千问：具备多轮对话、逻辑推理、多模态理解及多种语言支持能力，能够在多种应用场景下提供智能化服务。

/2.

百度的文心一言（ERNIE Bot）：整合了大规模知识图谱，能够进行高效的对话交互、文本生成和知识问答。/知识储备2.AI大模型4. 华为的盘古大模型：专注于分布式训练技术和全栈式AI基础设施的研究，展示了在国产计算平台上完成超大规模模型训练的可能性。

/

5. 科大讯飞的星火认知大模型：是中国本土研发的大型中文预训练模型，具有上千亿参数，涵盖文本生成、语言理解、知识问答、逻辑推理等多项能力/desk

任务分析top宽度80%，其余部分宽度100%headerdiv.bannertopbottom<footer>任务实施任务实施2任务8.2制作“导航菜单”模块效果展示知识储备响应式布局实现步骤2响应式布局的定义1目录Contents知识储备1.响应式布局的定义响应式布局是指一个网站能够兼容多个设备（PC、平板电脑、手机等），可以根据设备或窗口大小呈现出不同的效果，从而为不同终端的用户提供更好的用户体验。知识储备2.响应式布局实现步骤在页面头部加入meta声明viewport。<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no”>属性对应如下：width=device-width:自适应设备屏幕的尺寸宽度maximum-scale：缩放比例的最大值inital-scale：缩放的初始化，1为禁止初始缩放user-scalable：用户是否可以缩放操作1.设置<meta>标签2.媒体查询设置样式3.设置多种视图断点知识储备2.响应式布局实现步骤媒体查询是响应式布局的关键，通过媒体查询为不同的设备、设备的不同状态来分别设置样式。其语法格式如下：@mediamediaTypeand(mediafeather){css-code}1.设置<meta>标签2.媒体查询设置样式3.设置多种视图断点知识储备2.响应式布局实现步骤@mediamediaTypeand(mediafeather){css-code}mediaType是指设备类型，共有四种媒体类型，具体如下：all

默认值，所有设备（可省略不写）print

打印设备(用于打印机和打印预览)screen

用于电脑屏幕，平板电脑，智能手机等speech

应用于屏幕阅读器等发声设备1.设置<meta>标签2.媒体查询设置样式3.设置多种视图断点知识储备2.响应式布局实现步骤@mediamediaTypeand(mediafeather){css-code}and(与、和)not:用来排除掉某些特定设备，比如@medianotprint（非打印设备)only:用来指定某种特别的媒体类型。操作符@mediaonlyscreen{}/*只能在screen设备能用*/@medianotspeech{}

/*除了speech设备都可以用*/1.设置<meta>标签2.媒体查询设置样式3.设置多种视图断点知识储备2.响应式布局实现步骤@mediamediaTypeand(mediafeather){css-code}device-width:设备宽度device-height:设备高度max-device-width:最大设备宽度min-device-width:最小设备宽度​width：浏览器的宽度height:浏览器的高度max-width：最大宽度min-width:最小宽度mediafeather：是媒体特性表达式，表示视口符合这个条件时，才会使用该样式。常用值如下：1.设置<meta>标签2.媒体查询设置样式3.设置多种视图断点知识储备2.响应式布局实现步骤桌面屏幕断点>=1024平板屏幕断点在768px和1023px之间手机屏幕断点<=767px样式切换的分界点，我们称其为断点，也就是网页的样式在这一点时发生变化。例如：在每个媒体查询块中，可以根据需要设置不同的样式。这些样式将仅在满足媒体查询条件时生效。1.设置<meta>标签2.媒体查询设置样式3.设置多种视图断点知识储备2.响应式布局实现步骤1.设置<meta>标签2.媒体查询设置样式3.设置多种视图断点在每个媒体查询块中，可以根据需要设置不同的样式。这些样式将仅在满足媒体查询条件时生效。示例：知识储备2.响应式布局实现步骤（1）盒子宽度需要使用百分比例如：header{width:100%}section{width:50%;}（2）处理图片缩放的方法可以给图片指定的最大宽度为百分比。假如图片超过了，就缩小；假如图片小了，就原尺寸输出。例如：1.设置<meta>标签2.媒体查询设置样式3.设置多种视图断点响应式布局能够快捷解决多设备显示适应问题，但是要兼容各种设备，工作量大，仅一般适用页面布局不复杂的网站。知识储备响应式网站建设的难度主要体现在对不同设备的适配和响应式设计上。我们需要充分考虑用户的使用习惯和设备特性，保证网站的易用性和可访问性，提高网站性能和加载速度，提升用户满意度。职业素养：用户至上任务分析先用CSS设置导航菜单水平显示的样式屏幕尺寸大于768px或小于768px时显示不同的样式，怎么实现？屏幕尺寸大于768px时水平显示再使用媒体查询语句设置导航菜单折叠显示的样式@media(max-width:768px){ /*在此针对小屏幕设备进行样式设置*/}屏幕尺寸小于768px时折叠显示<header>.logo<nav><nav>Iconfont图标ul>li任务实施任务实施3任务8.3制作“茶具展示”模块效果展示知识储备Flex布局相关属性2Flex布局的定义1目录Contents知识储备1.Flex布局的定义Flex是FlexibleBox的缩写，意为弹性布局，用来简便实现响应式页面布局。采用Flex布局的元素，称为Flex容器（flexcontainer），简称为“容器”；它的所有子元素为容器成员，称为Flex项目（flexitem），简称为“项目”。知识储备1.Flex布局的定义弹性容器默认有两条轴，主轴和交叉轴，呈90度交叉排列，在弹性容器中所有的子元素都是沿着主轴方向显示，每根轴都有起点和终点，通过flex-direction来决定主轴的方向。123主轴交叉轴起点子元素按主轴方向显示弹性盒子display:flex;任何一个容器都可以指定为Flex布局，只需要给该元素设置display:flex;属性。知识储备2.Flex布局相关属性justify-content：设置项目在主轴上的排列方式2align-items：设置项目在交叉轴的排列方式（单行）3flex-direction：设置主轴方向1flex-wrap：设置项目如何换行5flex-flow：同时设置flex-direction属性和flex-wrap属性6align-content：设置项目在交叉轴的排列方式（多行）4容器属性容器相当于父元素，即用在父元素上的属性知识储备2.Flex布局相关属性flex-direction属性：设置主轴方向，即项目的排列方向。1.flex-directionflex-direction:row|row-reverse|column|column-reverse;属性对应如下：row(默认值):主轴在水平方向，起点在左；row-reverse：主轴在水平方向，起点在右；column：主轴为垂直方向，起点在上；column-reverse：主轴为垂直方向，起点在下；rowrow-reversecolumncolumn-reverse容器属性知识储备2.Flex布局相关属性设置项目在主轴上的对齐方式，具体对齐方式与主轴的方向有关。下面假设主轴为水平方向，2.justify-contentjustify-content:flex-start|flex-end|center|space-between|space-around;flex-start(默认值)：左对齐flex-end：右对齐center：

居中对齐space-between：两端对齐，项目之间的间隔都相等space-around：每个项目两侧的间隔相等容器属性知识储备2.Flex布局相关属性设置项目在交叉轴上的对齐方式（单行），具体的对齐方式与交叉轴的方向有关，下面假设交叉轴为垂直方向。3.align-itemsalign-items:flex-start|flex-end|center|baseline|stretch;flex-start：上对齐flex-end：下对齐center：居中对齐baseline：项目的第一行文字的基线对齐stretch(默认值)：如果项目未设置高度或设为auto，将占满整个容器的高度，在设置有高度时，stretch无效，以设置的高度为准。容器属性知识储备2.Flex布局相关属性项目在交叉轴的排列方式（多行）。只能用于子项目是多行的情况，在单行下没有效果。下面假设交叉轴为垂直方向。4.align-contentalign-content:flex-start|flex-end|center|stretch|space-between|space-around;flex-start（默认值）：上对齐。flex-end：下对齐。center：居中对齐。stretch：拉伸对齐。space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。

容器属性知识储备2.Flex布局的定义align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸；align-content适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值；无论aligh-items和align-content在设置有高度时，对齐方式设置为stretch都无效。align-items和align-content区别容器属性知识储备2.Flex布局相关属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap。5.flex-wrapflex-wrap:nowrap|wrap|wrap-reverse;nowrap（默认值）：不换行wrap：换行，第一行在下方wrap-reverse：反向换行容器属性知识储备2.Flex布局相关属性flex-grow设置项目的放大比例2flex-shrink设置项目的缩小比例3order设置项目的排列顺序1flex是flex-grow、flex-shrink、flex-basis的简写5align-self设置单个项目的对齐方式6flex-basis设置元素在主轴上的初始尺寸4项目属性知识储备2.Flex布局相关属性设置项目的排列顺序，数值为整数，数值越小，排列越靠前，默认值为0。1.orderorder:<integer>/*default0*/+项目属性知识储备2.Flex布局相关属性规定项目的放大比例（容器宽度大于元素总宽度时如何伸展），默认为0，即如果存在剩余空间，也不放大。2.flex-growflex-grow:<number>;/*default0*/如果所有项目的flex-grow属性都为1，如果有空间的话则它们将等分。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。弹性容器的宽度正好等于元素宽度总和，无多余宽度，此时无论flex-grow是什么值都不会生效。项目属性知识储备2.Flex布局相关属性设置项目的缩小比例（容器宽度小于元素总宽度时如何收缩），默认为1，即如果空间不足，该项目将缩小。3.flex-shrinkflex-shrink:number|initial|inherit;/*default1*/如果所有项目fl