1.动画动画的基本使用第一步定义关键帧定义动画1简单方式定义:/* 写法一/keyframes动画名{from {/propertyl:value1//property2:value2/}to {/propertyl:value1 */2.完整方式定义keyframes动画名{0% {/* propertyl:value1/}20% {/propertyl:value1*/}40% {/propertyl:value1/}60% {/* propertyl:value1/}80% {/propertyl:value1/}100%. {/propertyl:value1 */}}第二步给元素应用动画用到的属性如下1.animation-name给元素指定具体的动画具体的关键帧2.animation-duration设置动画所需时间3.animation-delay设置动画延迟.box {/★指定动画*/animation-name: testKey:/*设置动画所需时间 */animation-duration:5s;/设置动画延迟/animation-delay:0.5s;}动画其他属性animation-timinggfunction设置动画的类型常用值如下1.ease平滑过渡——默认值2.linear线性过渡3.ease-in慢→快4.ease-out快一慢5.ease-in-out慢→快→慢6.step-start等同于steps(1,start)7.step-end等同于steps(1,end)8.stepsinteger接受两个参数的步进函数。第一个参数必须为正整数指定函数的步数。第二个参数取值可以是start或end指定每一步的值发生变化的时间点。第二个参数默认值为end。9.cubic-bezienumber,number,number,number):特定的贝塞尔曲线类型。5.动画复合属性只设置一个时间表示duration设置两个时间分别是duration和delay其他属性没有数量和顺序要求。.inner {animation:atguigu 3s 0.5s linear 2 alternate-reverse forwards;}备注:animation-play-state一般单独使用2.多列布局作用专门用于实现类似于报纸的布局3.伸缩盒模型1.伸缩盒模型简介2009年W3c提出了一种新的盒子模型一一FlexibleBox伸缩盒模型又称弹性盒子·它可以轻松的控制元素分布方式、元素对齐方式、元素视觉顺序·截止目前除了在部分IE浏览器不支持其他浏览器均已全部支持·伸缩盒模型的出现逐渐演变出了一套新的布局方案一一flex布局小贴士1.传统布局是指基于传统盒状模型主要靠display属性position属性float属性2.flex布局目前在移动端应用比较广泛因为传统布局不能很好的呈现在移动设备上4.伸缩容器、伸缩项目伸缩容器开启了flex的元素就是伸缩容器。1.给元素设置displayflex或displayinline-flex该元素就变为了伸缩容器。2.displayinline-flex很少使用因为可以给多个伸缩容器的父容器也设置为伸缩容器。3.一个元素可以同时是伸缩容器、伸缩项目。伸缩项目伸缩容器所有子元素自动成为了伸缩项目。1.仅伸缩容器的子元素成为了伸缩项目孙子元素、重孙子元素等后代不是伸缩项目。2.无论原来是哪种元素块、行内块、行内一旦成为了伸缩项目全都会“块状化”。5.主轴与侧轴主轴伸缩项目沿着主轴排列主轴默认是水平的默认方向是从左到右左边是起点右边是终点侧轴与主轴垂直的就是侧轴侧轴默认是垂直的默认方向是从上到下上边是起点下边是终点4.主轴方向属性名flex-direction常用值如下1.row主轴方向水平从左到右——默认值2.row-reverse主轴方向水平从右到左3.column主轴方向垂直从上到下4.column-reverse主轴方向垂直从下到上6.主轴换行方式属性名flexwrap常用值如下7.flex-flowflex-flow是一个复合属性复合了flex-direction和flex-wrap两个属性。值没有顺序要求。flex-flow: row wrap;8.主轴对齐方式属性名justify-content常用值如下1.flex-start主轴起点对齐。一—默认值2.flex-end主轴终点对齐。3.center居中对齐4.space-between均匀分布两端对齐(最常用。5.space-around均匀分布两端距离是中间距离的一半。6.space-evenly均匀分布两端距离与中间距离一致。9.1只有一行的情况所需属性align-items常用值如下1.flex-start侧轴的起点对齐。2.flex-end侧轴的终点对齐。3.center侧轴的中点对齐。4.baseline伸缩项目的第一行文字的基线对齐。5.stretch如果伸缩项目未设置高度将占满整个容器的高度。一一默认值9.2多行的情况所需属性align-content常用值如下1.flex-start与侧轴的起点对齐。2.flex-end与侧轴的终点对齐。3.center与侧轴的中点对齐。4.space-between与侧轴两端对齐中间平均分布。5.space-around伸缩项目间的距离相等比距边缘大一倍。6.space-evenly在侧轴上完全平分。7.stretch占满整个侧轴。一—默认值10.flex-basis概念flex-basis设置的是主轴方向的基准长度会让宽度或高度失效。备注生轴横向宽度失效主轴纵向高度失效·作用浏览器根据这个属性设置的值计算主轴上是否有多余空间默认值aut。即伸缩项目的宽或高。11.flex-grow(伸)概念f1ex-grow定义伸缩项目的放大比例默认为◎即纵使主轴存在剩余空间也不拉伸放大。规则:1.若所有伸缩项目的f1ex-grow值都为1则它们将等分剩余空间如果有空间的话2.若三个伸缩项目的f1ex-grow值分别为1、2、3则分别瓜分到1/6、2/6、3/6的空间13.项目排序rder属性定义项目的排列顺序。数值越小排列越靠前默认为014.单独对齐通过align-self属性可以单独调整某个伸缩项目的对齐方式默认值为auto表示继承父元素的align-items属性。15.媒体查询