Web前端技术 课件 模块二 任务6 新碟上架栏目实现

新碟上架栏目实现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是没有时间轴的。也就是说，所有的状态变化，都是即时完成。当鼠标移到蓝色方块上时，宽高瞬间发生变化子代选择符/后代选择符视频讲解CSS样式：transition延时符引入transition属性可以被指定为一个或多个CSS属性的过渡效果，多个属性之间用逗号进行分隔。transitionCSS属性是transition-property，transition-duration，transition-timing-function和transition-delay的一个简写属性。语法格式如下：

transition:[transition-property][transition-duration][transition-timing-function][transition-delay]transition-property指定应用过渡属性的名称(如background)。值可以为三种：none，all（默认），属性名称。transition-duration过渡动画所需的时间。默认值为0s，表示不出现过渡动画。transition-timing-function描述动画中间值是怎样计算。transition-delay开始作用之前需要等待的时间CSS样式：transition延时符其中：transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);linear规定以相同速度开始至结束的过渡效果（等于cubic-bezier(0,0,1,1)）。ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。ease-in规定以慢速开始的过渡效果（等于cubic-bezier(0.42,0,1,1)）。ease-out规定以慢速结束的过渡效果（等于cubic-bezier(0,0,0.58,1)）。ease-in-out规定以慢速开始和结束的过渡效果（等于cubic-bezier(0.42,0,0.58,1)）。cubic-bezier(n,n,n,n)在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值。transition使用方法视频讲解CSS样式：animation延时符transform和transition配合使用可以实现简单的动画，但如果实现更丰富的动画效果，则需要更专业的animation动画设置。在CSS3中创建动画,需要学习@keyframes规则。通过在动画序列中定义关键帧的样式来控制CSS动画序列中的中间步骤。和转换transition相比，关键帧可以控制动画序列的中间步骤。它的写法相当自由，可用0%-100%间的任意时间段定义动画各个状态，也可以使用from-to来定义，其中from相当于0%，to相当于100%。一般采用百分比来控制各关键帧。语法格式如下：@keyframesanimationname{keyframes-selector{css-styles;}}CSS样式：animation延时符CSS动画用animation调用关键帧实现动画效果，其语法格式如下：animation:namedurationtiming-functiondelayiteration-countdirection;1.animation-name规定需要绑定到选择器的keyframe名称2.animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是0。3.animation-timing-function规定动画的速度曲线。默认是“ease”。4.animation-delay规定动画何时开始。默认是0。5.animation-iteration-count规定动画被播放的次数。默认是1。6.animation-direction规定动画是否在下一周期逆向地播放。默认是“normal”;alternate(轮流)。animation和@keyframe的使用方法视频讲解任务实施延时符结构分析样式分