HTML5与CSS3知识点总结（40-42）

40 动画 animation属性

（复合属性）

animation: name duration timing-function delay iteration-count direction fill-mode;

从左往右依次是:动画的名称、时间、速度曲线、延迟时间、播放的次数、播放顺序、动画播放完结后的状态。

40.1 @keyframes 规则

用于创建动画，animation属性只有配合@keyframes 规则才能实现动画效果，@keyframes 规则的语法如下：

      @keyframes mymove{
        keyframes-selector{css-styles;}
      }

mymove：表示当前动画的名称（也就是后面讲到的animation-name属性定义的名称），它将作为引用时的唯一标识，因此不能为空。

keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。其中，form和0%效果相同，表示动画的开始；to和100%效果相同，表示动画的结束。当两个位置应用同一个效果时，这两个位置使用英文逗号隔开，写在一起即可，例如"20%,80%{opacity:0.5;}"。

css-styles:定义执行到当前关键帧时对应的动画状态，由css样式属性进行定义，多个属性之间用分号隔开，不能为空。

40.2 animation-name属性

用于定义要应用的动画名称

animation-name: mymove | none;

40.3 animation-duration 属性

用于定义完成整个动画效果所需要的时间

animation-duration: time;

time参数是以秒（s）或者毫秒（ms）为单位的时间。

40.4 animation-timing-function 属性

用来规定动画的速度曲线

animation-timing-function: value;

属性值	描述
linear	动画从头到尾的速度是相同的
ease	默认属性值，动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
cubic-bezier(n,n,n,n)	在cubic-bezier函数中自己的值，取值范围一般是从0-1之间的数值

40.5 animation-delay 属性

用于定义执行动画效果延迟的时间

animation-delay: time;

40.6 animation-iteration-count 属性

用于定义动画的播放次数

animation-iteration-count: number | infinite;

属性初始值为1。如果属性值为数字（number），则表示播放动画的次数，即动画循环播放多少次；如果是infinite，则指定动画循环播放。

40.7 animation-direction 属性

用于定义当前动画播放的方向

animation-direction: normol | alternate;

normol为默认属性值，动画会正常播放，alternate 属性值会使动画在次数为奇数时（如1、3、5等）正常播放，而在次数为偶数时（如2、4、6等）逆向播放。因此首先要定义动画播放次数，动画播放次数大于等于2时，animation-direction 属性才会生效。

40.8 animation-fill-mode 属性

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode: none;

• none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
• forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iterationcount）。
• backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保 留该值。
• both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

41 2D/3D 变形

41.1 2D 变形

• 平移

  transform: translate(x-value, y-value);/*参数值常用单位为像素或百分比*/
  

  当参数值为正数时，（向右和向下）移动元素。负数，则向相反方向移动。

• 缩放

  transform: scale(x-value, y-value);/*参数值可以为正数、负数、小数，不需要加单位*/
  

  正数用于放大元素，负数用于翻转缩放元素，小于1的小数用于缩小元素。

• 倾斜

  transform: skew(x-value, y-value);
  

• 旋转

  transform: rotate(angle);
  

  angle表示要旋转的角度，单位为deg，角度为正数值，顺时针旋转，否则按照逆时针方向旋转。

更改变换的中心点

transform-origin: x-axis y-axis z-axis;/*默认值为50%、50%、0px*/

参数	描述
x-axis	定义视图被置于x轴的何处，属性值可以为百分比、px等具体值，也可以是top、right、left等等
y-axis	定义视图被置于轴y的何处，属性值可以为百分比、px等具体值，也可以是top、right、left等等
z-axis	定义视图被置于z轴的何处，该值不能是一个百分比值，一般为像素单位

注：如果一个元素需要设置多种变形效果，可以用空格把多个变形属性值隔开。参数x-axis、y-axis表示水平和垂直位置的坐标位置，用于2D变形，参数z-axis表示空间纵深坐标位置，用于3D变形。

41.2 3D 变形

X轴：水平向右，X右边是正值，左边是负值。 Y轴：垂直向下，Y下面是正值，上面是负值。 Z轴：垂直屏幕，往外面是正值，往里面是负值。

• rotateX() 指定元素围绕X轴旋转

  transform: rotateX(a);/*a为旋转角度，正数顺时针，负数逆时针*/
  

• rotateY() 指定元素围绕Y轴旋转

  transform: rotateY(a);/*a为旋转角度，正数顺时针，负数逆时针*/
  

• rotateZ() 指定元素围绕Z轴旋转

 transform: rotateZ(a);/*a为旋转角度，正数顺时针，负数逆时针*/

• rotate3d()

  transform: rotate3d(1,0,1,45deg);/*要沿着某轴转动，就将该轴的值设为1，否则为零。45deg为旋转的角度*/
  

• perspective属性

  视距，设置透视效果。包括两个属性：none和具有单位的数值（一般单位为像素），属性值越小，透视效果越突出。放在被透视的父元素中使用。

除了旋转，3D变形还包括移动和缩放

42 Flex 布局

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。行内元素也可以使用 Flex 布局。

.box{
display: flex | inline-flex;
}

采用 Flex 布局的元素，称为 Flex 容器 （flex container），简称 容器 。它的所有子元素自动成为容器成员，称为 Flex 项目 （flex item），简称 项目 。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉 点）叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。 .box{ display: flex; } .box{ display: inline-flex; } 项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。

42.1 容器的属性

以下 6 个属性设置在容器上：

属性	描述
flex-direction	决定主轴的方向。
flex-wrap	如果一条轴线排不下，如何换行
flex-flow	flex-direction 属性和 flex-wrap 属性的简写属性。
justify-content	定义项目在主轴上的对齐方式。
align-items	定义项目在交叉轴上如何对齐。
align-content	定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

• flex-direction 属性 决定主轴的方向（即项目的排列方向）。

  .box{
  flex-direction: row | row-reverse | column | column-reverse;
  }
  

  它可能有4个值：

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

• flex-wrap 属性

  默认情况下，项目都排在一条线（又称 轴线 ）上。 flex-wrap 属性定义，如果一条轴线排不下，如何换行。

  .box{
  flex-wrap: nowrap | wrap | wrap-reverse;
  }
  

  它可能取三个值：

  • nowrap（默认）：不换行。
  • wrap：换行，第一行在上方。
  • wrap-reverse：换行，第一行在下方。

• flex-flow 属性

  flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap 。

  .box{
  flex-flow: <flex-direction> <flex-wrap>;
  }
  

• justify-content 属性 定义了项目在主轴上的对齐方式。

  它可能取 6 个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右：

  • flex-start（默认值）：左对齐。
  • flex-end：右对齐。
  • center： 居中。
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。但项目之间的间隔比项目与边框的间隔大一倍。
  • space-evenly：每个项目两侧的间隔相等，且项目之间的间隔和下项目与边框的间隔相等。

• align-items 属性 定义项目在交叉轴上如何对齐。

  它可能取 5 个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下：

  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline：项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度

• align-content 属性 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

  该属性可能取 6 个值：

  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。

42.2 项目的属性

以下 6 个属性设置在项目上：

属性	描述
order	定义项目的排列顺序。数值越小，排列越靠前，默认为 0。
flex-grow	定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
flex-shrink	定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
flex-basis	定义了在分配多余空间之前，项目占据的主轴空间（main size）。它的默认值为 auto，即项目的 本来大小。
flex	flex-grow 、 flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。
align-self	允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto 。

• order 属性 定义项目的排列顺序。数值越小，排列越靠前，默认为 0。

• flex-grow 属性 定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。

  如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间（如果有的话）。 如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。

• flex-shrink 属性 定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。

  如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。 如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。

• flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主 轴是否有多余空间。它的默认值为 auto，即项目的本来大小。

  它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

• flex 属性是 flex-grow 、 flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。

  该属性有两个快捷值： auto （ 1 1 auto ）和 none （ 0 0 auto ）。 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

• align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto ，表 示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch 。

  .item{
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
  }
  

  该属性可能取 6 个值，除了 auto ，其他都与 align-items 属性完全一致。