动画什么是帧一段动画就是一段时间内连续播放 n 个画面。每一张画面我们管它叫做“帧”。一定时间内连续快速播放若干个帧就成了人眼中所看到的动画。同样时间内播放的帧数越多画面看起来越流畅。什么是关键帧关键帧指的是在构成一段动画的若干帧中起到决定性作用的 2-3 帧。动画的基本使用第一步定义关键帧定义动画简单方式定义/*写法一*/ keyframes 动画名 { from { /*property1:value1*/ /*property2:value2*/ } to { /*property1:value1*/ } }完整方式定义keyframes 动画名 { 0% { /*property1:value1*/ } 20% { /*property1:value1*/ } 40% { /*property1:value1*/ } 60% { /*property1:value1*/ } 80% { /*property1:value1*/ } 100% { /*property1:value1*/ } }第二步给元素应用动画用到的属性如下animation-name 给元素指定具体的动画具体的关键帧animation-duration 设置动画所需时间animation-delay 设置动画延迟.box { /* 指定动画 */ animation-name: testKey; /* 设置动画所需时间 */ animation-duration: 5s; /* 设置动画延迟 */ animation-delay: 0.5s; }动画的其他属性animation-timing-function 设置动画的类型常用值如下ease 平滑动画 —— 默认值linear 线性过渡ease-in 慢 → 快ease-out 快 → 慢ease-in-out 慢 → 快 → 慢step-start 等同于 steps(1, start)step-end 等同于 steps(1, end)steps( integer,?) 接受两个参数的步进函数。第一个参数必须为正整数指定函数的步数。第二个参数取值可以是 start 或 end 指定每一步的值发生变化的时间点。第二个参数默认值为 end 。cubic-bezie ( number, number, number, number) 特定的贝塞尔曲线类型。animation-iteration-count 指定动画的播放次数常用值如下number 动画循环次数infinite 无限循环animation-direction 指定动画方向常用值如下normal 正常方向 (默认)reverse 反方向运行alternate 动画先正常运行再反方向运行并持续交替运行alternate-reverse 动画先反运行再正方向运行并持续交替运行animation-fill-mode 设置动画之外的状态forwards 设置对象状态为动画结束时的状态backwards 设置对象状态为动画开始时的状态animation-play-state 设置动画的播放状态常用值如下running 运动 (默认)paused 暂停动画复合属性只设置一个时间表示 duration 设置两个时间分别是 duration 和 delay 其他属性没有数量和顺序要求。.inner { animation: atguigu 3s 0.5s linear 2 alternate-reverse forwards; }—备注 animation-play-state 一般单独使用。多列布局作用专门用于实现类似于报纸的布局。常用属性如下column-count 指定列数值是数字。column-width 指定列宽值是长度。columns 同时指定列宽和列数复合属性值没有数量和顺序要求。column-gap 设置列边距值是长度。column-rule-style 设置列与列之间边框的风格值与 border-style 一致。column-rule-width 设置列与列之间边框的宽度值是长度。column-rule-color 设置列与列之间边框的颜色。coumn-rule 设置列边框复合属性。column-span 指定是否跨列值: none 、 all 。伸缩盒模型伸缩盒模型简介2009 年 W3C 提出了一种新的盒子模型 —— Flexible Box 伸缩盒模型又称弹性盒子。它可以轻松的控制元素分布方式、元素对齐方式、元素视觉顺序 …截止目前除了在部分 IE 浏览器不支持其他浏览器均已全部支持。伸缩盒模型的出现逐渐演变出了一套新的布局方案 —— flex 布局。小贴士传统布局是指基于传统盒状模型主要靠 display 属性 position 属性 float属性。flex 布局目前在移动端应用比较广泛因为传统布局不能很好的呈现在移动设备上。伸缩容器、伸缩项目伸缩容器 开启了 flex 的元素就是伸缩容器。3. 给元素设置 display:flex 或 display:inline-flex 该元素就变为了伸缩容器。4. display:inline-flex 很少使用因为可以给多个伸缩容器的父容器也设置为伸缩容器。5. 一个元素可以同时是伸缩容器、伸缩项目。伸缩项目伸缩容器所有子元素自动成为了伸缩项目。7. 仅伸缩容器的子元素成为了伸缩项目孙子元素、重孙子元素等后代不是伸缩项目。8. 无论原来是哪种元素块、行内块、行内一旦成为了伸缩项目全都会“块状化”。主轴与侧轴主轴 伸缩项目沿着主轴排列主轴默认是水平的默认方向是从左到右左边是起点右边是终点。侧轴 与主轴垂直的就是侧轴侧轴默认是垂直的默认方向是从上到下上边是起点下边是终点。主轴方向属性名 flex-direction常用值如下row 主轴方向水平从左到右 —— 默认值row-reverse 主轴方向水平从右到左。column 主轴方向垂直从上到下。column-reverse 主轴方向垂直从下到上。注意改变了主轴的方向侧轴方向也随之改变。主轴换行方式属性名 flex-wrap常用值如下nowrap 默认值不换行。wrap 自动换行伸缩容器不够自动换行。wrap-reverse 反向换行。flex-flowflex-flow 是一个复合属性复合了 flex-direction 和 flex-wrap 两个属性。 值没有顺序要求。作业!DOCTYPE html html langzh-CN head meta charsetUTF-8 title热销商品专区/title style .main { width: 1200px; margin: 0 auto; } .topbar { background-color: #f5f5f5; } .first::after { content: ; display: block; clear: both; } .first .top { float: left; font-size: 16px; color: #333; text-decoration: none; padding:10px 15px; } .title { position: sticky; top: 0; z-index: 10; background:white; font-size: 28px; padding:10px 0; } .thing { position: relative; } .thing::after { content: ; display: block; clear: both; } .card { float: left; width: 270px; height: 380px; margin-right: 20px; border:1px solid #999; position: relative; } img { width:100%; height:240px; object-fit: cover; display:block; margin-top: 20px; } .card-name { font-size:16px; margin:10px 0; text-align:center; font-weight: bold; vertical-align: bottom; } .hot { position:absolute; top:0; right:0; z-index:2; background-color:red; color:#fff; padding:3px 8px; font-size:12px; width: 15%; text-align: center; } .answer { position: fixed; right:30px; bottom:60px; width:60px; height:60px; border-radius:50%; background-color:red; color:white; text-align:center; line-height:60px; z-index:999; } /style /head body div classtopbar div classmain first div classtop首页/div div classtop商品分类/div div classtop优惠活动/div /div /div div classmain h3 classtitle热销商品专区/h3 div classthing div classcard div classhot热销/divbr img src商品.png alt div classcard-name商品1/div /div div classcard div classhot热销/divbr img src商品.png alt div classcard-name商品2/div /div div classcard div classhot热销/divbr img src商品.png alt div classcard-name商品3/div /div div classcard div classhot热销/divbr img src商品.png alt div classcard-name商品4/div /div /div /div div classanswer客服/div /body /html