人民大2024Web前端技术-PPT模块二 任务6 新碟上架栏目实现.pptx

新碟上架栏目实现Web前端技术主讲老师：***延时符

CONTENTS目录01任务描述03知识点导图02学习目标04相关知识05任务实施延时符

任务描述延时符

任务描述网页中的容器空间是有限的，如果容器里需要展示的内容超出了容器尺寸，通常的方法是采用轮播或者滚动的方式展现，可用CSS的动画功能实现。本次任务是将上架的新碟在页面右侧以上下滚动的方式展现.延时符

页面效果图延时符

学习目标延时符

学习目标掌握CSS动画的基本概念；掌握transform和transition配合设置动画的方法；掌握animation和@keyframe配合设置动画的方法；知识目标能够根据效果图合理使用动画进行展示；能学会动画设置的HTML和CSS方法；能学会@keyframe两种配置方法；技能目标延时符培养分析问题、解决问题的能力；培养良好的审美观念；培养责任感、竞争意识、团队合作和奉献精神。素养目标

知识点导图延时符

知识点导图延时符

相关知识延时符transform和transform-origintransitionanimation使用方法

CSS样式:动画延时符CSS动画使元素逐渐从一种样式变为另一种样式。CSS动画有三个主要优点：1）能够非常容易地创建简单动画，你甚至不需要了解JavaScript就能创建动画。2）动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用JavaScript实现的动画通常表现不佳（除非经过很好的设计）。3）让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。动画包括两个部分：1）描述动画的样式规则；2）用于指定动画开始、结束以及中间点样式的关键帧。

CSS样式：transform和transform-origin延时符动画的样式规则由transform和transform-origin两个属性实现2D变换。其中transform属性用于实现平移、缩放、旋转和倾斜等变换，transform-origin属性则用于设置中心点的变换。语法格式如下：style选择器{Transform:属性值;}/style

CSS样式：transform和transform-origin延时符常用属性值有：平移translate(x,y)平移有三种变化：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）。translateX(x)仅水平方向移动（X轴移动）。translateY(y)仅垂直方向移动（Y轴移动）。举例：transform:translate(50px,50px)；效果??图所示。解释：使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。注：坐标值可以为负值或百分比值

CSS样式：transform和transform-origin延时符缩放scale(x,y)缩放有三种变化：scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）。scaleX(x)元素仅水平方向缩放（X轴缩放）。scaleY(y)元素仅垂直方向缩放（Y轴缩放）。举例：transform:scale(0.8,1);效果??图所示。解释：使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。

CSS样式：transform和transform-origin延时符旋转rotate(deg)可以对元素进行旋转，正值为顺时针，负值为逆时针；举例：transform:rotate(45deg);效果如??图所示。解释：使用rotate方法使该元素以中心点为原点旋转45度属性transform-origin可以调整元素转换变形的原点，比如改变元素原点到左上角，然后进行顺时旋转45度，代码如下：div{transform-origin:lefttop;transform:rotate(45deg);}注：如果是4个角，可以用lefttop这些，如果想要精确的位置，可以用px像素。

CSS样式：transform和transform-origin延时符倾斜skew(deg,deg)可使元素在水平和垂直方向上倾斜一定角度，第二个参数不写默认为0。举例：transform:skew(30deg,0deg);效果右图所示。解释：该实例通过skew方法把元素水平方向上倾斜30度，垂直方向保持不变。Transform使用方法视频讲解

CSS样式：transition延时符在CSS3引入Transition（过渡）这个概念之前，CSS是没有时间轴的。也就是说，所有的状态变化，都是即时完成。当鼠标移到蓝色