HTML5网页制作与前端开发（AI协同）课件 模块5　CSS动画-以创意呈现流动的画卷

零号任务静中思动——CSS过渡与关键帧动画汇报人：xxx时间：2026任务说明01本任务将在社团管理网页中创建一个“动感休闲区”，此区域可通过单击跳转到另外一个“可供读者在线学习CSS动画”的网站。该网站将采用模块化学习的布局方式，每个小模块将专注于某一特定的CSS动画知识点。通过这个任务，你不仅可以提升自己的CSS动画技能，同时也将学会如何设计一个结构清晰、互动性强且用户友好的在线学习平台。本任务需要完成以下操作。（1）创建一个简单的网站框架，使用<header>、<nav>、<section>等标签，并使用CSS进行美化处理。（2）在<section>中添加CSS过渡动画的示例，并展现其动画效果。在<section>中添加CSS关键帧动画的示例，并展现其动画效果。零号任务任务说明知识准备0201简单的过渡效果02复杂动画关键帧目录1.简单的过渡效果知识准备transition属性可以让CSS的属性变化变得平滑、渐进。例如，当用户将鼠标指针悬停在按钮上时，按钮的背景色可以缓慢地过渡，而不是跳变。这种效果可以优化用户体验，使页面浏览起来更加流畅。transition属性如下。（1）transition-property：指定要应用过渡效果的属性，比如background-color、width等。（2）transition-duration：指定过渡效果的持续时间。（3）transition-timing-function：指定过渡效果的速度曲线，常见的值有ease、linear、ease-in、ease-out。（4）transition-delay：指定过渡效果开始之前的延迟时间。下面让AI助手生成包含transition属性的过渡效果：1.简单的过渡效果知识准备transition:background-color0.3sease;：设置背景色的过渡效果，持续时间为0.3秒，使用ease过渡曲线（缓慢开始、加速、减速）。button:hover{}：这部分定义了当鼠标指针悬停在按钮上时应用的样式。cursor:pointer;：将鼠标指针设置为指针形状（通常用于可点击元素）。在浏览器中打开网页，其中的按钮如左图所示，当用户将鼠标指针悬停在按钮上时，按钮的背景色会缓慢地过渡，如右图所示。2.复杂动画关键帧知识准备@keyframes用于定义一个动画的关键帧，允许创建复杂的动画效果。通过@keyframes，我们可以指定动画从开始到结束的多个状态，从而实现更复杂的视觉变化。@keyframes语法如下①使用from和to两个关键词分别定义动画的起始状态和结束状态。这是一种定义简单双向动画的简洁写法：from：定义动画的起始状态（等价于0%）；to：定义动画的结束状态（等价于100%）。②使用百分比（如0%、50%,100%）来定义动画的每个阶段。示例：3.其他常见的动画属性知识准备transform属性用于对元素进行转换，包括平移、旋转、缩放、倾斜等效果。常见的transform函数如下。translate(x,y)：移动元素。rotate(angle)：旋转元素。scale(x,y)：缩放元素。skew(x,y)：倾斜元素。当鼠标指针悬停在.transform-box元素上时，元素将向右移动50px，旋转45度，并放大1.5倍，产生一个组合效果：3.其他常见的动画属性知识准备opacity属性控制元素的不透明度，从完全透明（0）到完全不透明（1）。此属性常用于制作淡入淡出效果。当鼠标指针悬停时，不透明度会平滑过渡至1，产生一个淡入效果。任务实现03任务实现01使用transition属性实现过渡效果：鼠标悬停在按钮上时，按钮背景颜色变化且按钮略微放大

/*过渡效果*/

.transition-btn{

padding:10px20px;

background-color:#007bff;

color:#fff;

border:none;

border-radius:4px;

cursor:pointer;

transition:background-color0.3sease,transform0.3sease;

}

.transition-btn:hover{

background-color:#0056b3;

transform:scale(1.1);

}

@keyframesspin{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

.keyframes-box{

width:100px;

height:100px;

background-color:#ff6347;

margin:20pxauto;

animation:spin2slinearinfinite;

}02使用@keyframes实现关键帧动画：方块持续旋转，且无缝循环。谢谢大家汇报人：xxx时间：2026一号任务动感加速——探索CSS缓动函数汇报人：xxx时间：2026任务说明01在零号任务中，我们已经确定了初步的CSS动画学习站框架，并为其添加了两个小模块，分别是过渡与关键帧动画；本任务，将继续为网站添加其他CSS动画，具体如下。（1）在正文部分添加<section>模块，并添加缓动函数的示例，清晰展现其动画效果。（2）结合所学的所有CSS动画知识，结合不同的动画效果制作复杂的组合动画。一号任务任务说明知识准备0201缓动函数的定义及分类目录02自定义缓动函数1.缓动函数的定义及分类知识准备缓动函数本质上是一个数学公式，控制着动画的变化速度。通过不同的缓动函数，动画可以表现出不同的运动方式，如加速、减速、先加速后减速等。在缓动函数中，cubic-bezier()函数比较常用，贝塞尔曲线通过调整控制点，可精细定义动画节奏。你将在模块8中系统学习贝塞尔曲线和其数学公式的推导过程，并体验曲线变化如何影响动画效果。缓动函数描述示例代码效果说明Linear（线性）线性过渡，动画速度保持不变transition-timing-function:linear;适用于不需要加速或减速的情况，动画效果均匀Ease（缓解）慢速开始，然后加速，最后减速transition-timing-function:ease;简单的动画过渡，适用于大部分交互效果ease-in（缓入）慢速开始，逐渐加速transition-timing-function:ease-in;动画以缓慢的速度启动，适用于突显进入的动画效果ease-out（缓出）快速开始，然后减速transition-timing-function:ease-in-out;动画开始时速度较快，逐渐减速，适用于退出效果ease-in-out（缓入缓出）慢速开始，加速后再减速transition-timing-function:ease-in-out;动画在开始和结束时都较为缓慢，中间加速，适合一些完整的进出场景cubic-bezier(n,n,n,n)使用自定义贝塞尔曲线控制速度变transition-timing-function:cubic-bezier(0.68,-0.55,0.27,1.55);高度自定义，适用于需要特殊缓动效果的场景，如弹性或振动效果2.自定义缓动函数知识准备有一些特定的缓动函数能够为动画增添独特的效果。例如，easeInBounce和easeOutElastic是两种特殊的缓动函数，常用于创建具有弹性和回弹效果的动画，模拟弹簧或橡皮筋的运动，让动画呈现出更加自然有趣的视觉效果。为了更便捷地选择和定制适合项目的动画效果，我们可以借助在线工具Easings，其中配备的可视化工具能帮助我们直观地感受不同缓动函数的效果。使用步骤如下。（1）访问Easings，打开在线工具页面。（2）在页面中选择或自定义所需的缓动函数。可以浏览各种预设的缓动函数效果，也可以按照自身需求对缓动函数进行定制。2.自定义缓动函数知识准备（3）当用户在页面左侧完成缓动函数的自定义设置后，右侧区域会实时呈现对应的动画预览效果。2.自定义缓动函数知识准备值得注意的是，某些缓动函数（如easeOutElastic、easeInBounce等）并不是CSS内置的缓动函数，但你可以借助学过的@keyframes和transform模拟弹性动画效果。以easeOutElastic为例，首先定义一个@keyframes规则，设定动画的关键帧。在关键帧中，明确指定元素在不同时间点的状态。这里利用@keyframes规则成功实现了类似easeOutElastic的弹性动画效果。在实际项目中，可根据具体的设计需求，灵活调整关键帧的状态和时间点，从而打造出符合预期的弹性动画效果。任务实现03任务实现01在零号任务完成的CSS动画学习站的基础上，添加<section>模块，并使用缓动函数为其添加不同的动画效果。02根据所学的所有CSS动画知识，结合多个动画效果或不同的关键帧来创建复杂的动画序列。谢谢大家汇报人：xxx时间：2026二号任务惟妙惟肖——使用CSS动画优化静态网站汇报人：xxx时间：2026任务说明01在模块4的学习中，我们使用CSS美化了志愿服务队招新页面，以增加对用户的吸引力，本任务将使用CSS动画修饰志愿服务队招新页面，具体要求如下。（1）学习CSS动画需遵循的网页设计原则，避免CSS使用不当而产生“影响页面的可访问性”“影响用户体验感”等问题。（2）为主题切换按钮增加鼠标指针悬停时的放大效果。（3）为图片展示区的图片设置进入动画，让图片从透明缓缓变为不透明。（4）在浮动布局内容区域增加卡片上下浮动的动画，为页面增添活力。（5）在志愿服务队招新页面右下角的空白区域添加一个矩形按钮，点击后跳转到CSS动画学习站。二号任务任务说明知识准备0201网页设计原则与CSS动画的关系目录如何遵循网页设计原则021.网页设计原则与CSS动画的关系知识准备CSS动画和网页设计原则之间有着密切的联系，因为动画不仅可以增强用户体验，还可以帮助开发者传达信息、提高页面交互性，但同时不应影响页面的可访问性和性能。（1）一致性（Consistency）：动画应与网页的整体设计风格一致，不要使用与页面风格不符的动画效果。比如，页面是简洁的现代风格，那么动画效果就应简洁、平滑，不要过于复杂或生硬。（2）可用性与可访问性（UsabilityandAccessibility）：动画不应妨碍内容的可读性和可访问性。例如，动画不应干扰文本的可见性或导致页面加载过慢。在某些情况下，可以提供禁用动画的选项，以便用户关闭过于炫目的效果。（3）节奏与时长（RhythmandDuration）：动画的时长和节奏要与用户交互的预期相符合。动画过快或过慢都会让用户感到困惑或不耐烦。（4）清晰与引导性（ClarityandGuidance）：动画应有助于引导用户理解页面的结构、功能或交互逻辑。例如，单击按钮时的动画可以引导用户知道按钮被点击，或者当用户滚动页面到特定区域时，动画可以让用户注意到新内容。2.如何遵循网页设计原则知识准备为了遵循上述网页设计原则，使用CSS动画时要考虑以下几个方面。（1）平滑过渡与细节：动画要平滑自然，避免突然变化。比如，鼠标指针悬停在按钮上时的动画要平滑过渡，而不是突兀地改变样式。（2）避免过多的动画：动画不应过多，过度使用动画会让页面显得繁杂，影响加载速度和分散用户的注意力。（3）动画时长的控制：动画的时长应根据设计需要进行调整，通常保持在300ms到500ms之间，避免过长或过短，影响用户的体验。（4）用户交互反馈：使用动画来提供明确的交互反馈，比如在按钮被单击或表单提交时使用动画效果来增强反馈感。（5）优化性能：动画的实现方式要尽量避免重绘和重排，确保页面的性能不受影响。使用AI助手生成一个简单的按钮动画示例，并且要符合网页设计的几个基本原则：4.文字排版与过渡效果2.如何遵循网页设计原则知识准备transition属性使鼠标指针悬停在按钮上时按钮平滑地放大，同时添加阴影，增强交互反馈。通过transform属性来放大按钮，避免影响布局重排（较为高效）。box-shadow用来增加聚焦时的视觉提示，符合可访问性设计要求。:focus伪类提供键盘导航时的视觉反馈，确保键盘用户也能感知到焦点。<style>

body{

font-family:Arial,sans-serif;

background-color:#f4f4f4;

display:flex;

justify-content:center;

align-items:center;

height:100vh;

margin:0;

}

.btn{

background-color:#007BFF;

color:white;

border:none;

padding:12px24px;

font-size:16px;

cursor:pointer;

border-radius:4px;

transition:transform0.3sease,box-shadow0.3sease;

/*平滑过渡*/

}

/*按钮悬停时的动画效果*/

.btn:hover{

transform:scale(1.1);

/*放大效果*/

box-shadow:04px12pxrgba(0,0,0,0.2);

/*增加阴影*/

}

/*添加焦点状态，符合可访问性设计*/

.btn:focus{

outline:none;

box-shadow:005px2pxrgba(0,123,255,0.6);

/*聚焦时显示蓝色阴影*/

}

</style>任务实现03任务实现（1）使用transition和transform，为主题切换按钮增加鼠标指针悬停时的放大效果。（2）使用关键帧@keyframes和animation动画，为图片展示区的图片设置进入动画，让图片从透明缓缓变为不透明。（3）结合CSS组合动画，在“浮动布局内容”区域增加卡片上下浮动的动画，为页面增添活力。（4）在志愿服务队招新页面右下角的空白区域添加一个矩形按钮，点击后跳转到CSS动画学习站。通过对比可知：当用户与页面交互时，动画也可以提供实时反馈让操作更加直观：任务实现不同类型的动画（如淡入、缩放、浮动）能够在不同的模块中起到提升视觉吸引力的作用，让页面内容不再平淡无奇。最后，在志愿服务队招新页面右下角的空白区域添加一个矩形按钮，并设置CSS动画学习站的超链接，实现单击后跳转。谢谢大家汇报人：xxx时间：2026技能补强别具匠心——视觉效果与功能的融合汇报人：xxx时间：2026技能知识011.使用细腻的过渡效果技能知识让我们为网页中的按钮添加一个细腻的过渡效果。当用户将鼠标指针悬停在按钮上时，按钮的颜色和阴影将平滑变化，提升按钮的交互感。transition:all0.3sease-in-out;：设置了所有可以过渡的属性（如颜色、背景色、阴影等）在0.3秒内进行平滑过渡，过渡的效果是ease-in-out。:hover伪类：当鼠标指针悬停在按钮上时，按钮的背景颜色会变为主色（#2E86C1），文字颜色变为白色，并且增加阴影效果，提升了按钮的立体感。2.使用细节化的动画效果技能知识给页面中的某些文本元素添加一个渐变淡入的动画效果，让页面内容在加载时看起来更具层次感。@keyframesfadeIn：定义一个名为fadeIn的动画，初始时元素是透明的，并且稍微向下偏移（translateY(20px)）。动画结束时，元素完全不透明（opacity:1），并恢复到原始位置（transform:translateY(0)）。animation:fadeIn1sease-out;：应用fadeIn动画并设置其时长为1秒，ease-out表示动画开始较快、结束时较慢，这样动画会更加自然。3.使用背景渐变和阴影效果技能知识给页面中的卡片元素（例如展示团队成员的卡片）添加背景渐变和阴影效果，增加它们的层次感和高级感。linear-gradient(135deg,#FFB6C1,#2E86C1);：使用线性渐变作为卡片的背景，从粉色渐变到蓝色，增加色彩层次感。box-shadow:04px12pxrgba(0,0,0,0.1);：为卡片添加阴影，使其看起来更具浮动感。hover效果：当鼠标悬停在卡片上时，卡片会向上浮动（translateY(-10px)）并且阴影增大，从而产生更强的立体感。技能实践021.结合JavaScript实现“刀片切割效果”技能实践JavaScript是广泛用于网页开发的编程语言，主要用于实现网页的动态效果和交互功能，在实际开发中常会把CSS动画和JavaScript结合使用：CSS动画负责简单的、重复的动画效果（如鼠标指针悬停、页面加载动画等）。而JavaScript则负责复杂的、与逻辑相关的动画效果。初步使用二者来实现一种刀片切割效果，具体步骤如下。（1）创建blade和cut-effect盒子，分别表示“刀片容器”和“页面切割效果”。（2）为“刀片”设置pointer-events:none，防止它干扰鼠标交互。（3）使用clip-path定义切割区域，通过动态更新该区域模拟“切割”效果。你将在模块6中系统地学习JavaScript，因此这里先体会效果，暂不进行JavaScript代码的解析。关键代码示例如教材所示，运行效果如下：2.制作高级玻璃质感效果技能实践CSS动画学习站跳转按钮当前的样式有点普通，我们可以为其制作类似玻璃质感的效果，常使用半透明背景色和模糊背景来模拟玻璃质感，效果如同通过磨砂玻璃看到的模糊背景。同时在加载页面时通过透明度和模糊渐变动画，使进入效果更加平滑和吸引人。具体步骤如下。（1）使用一个半透明的背景色，让背景的颜色和模糊效果显得更自然。（2）使用backdrop-filter:blur()属性，为容器增加模糊效果。（3）添加一点边框和阴影，以增强立体感。（4）添加鼠标指针悬停效果，鼠标指针悬停时，背景透明度会提高，并且阴影效果增强，提升交互感。思考与练习请同学们注意：填空题考查CSS动画的核心概念与特性；判断题辨析动画与