css高级应用

过渡

1. transition-property

transition-property 属性用来设置元素中参与过渡的属性名称，语法格式如下：

transition-property: none | all | property;
参数说明如下：

• none：表示没有属性参与过渡效果；
• all：表示所有属性都参与过渡效果；
• property：定义应用过渡效果的 CSS 属性名称列表，多个属性名称之间使用逗号,进行分隔。

  2. transition-duration

  transition-duration 属性用来设置过渡需要花费的时间（单位为秒或者毫秒），语法格式如下：

transition-duration: time;
其中，time 为完成过渡效果需要花费的时间（单位为秒或毫秒），默认值为 0，意味着不会有效果。

如果有多个参与过渡的属性，也可以依次为这些属性设置过渡需要的时间，多个属性之间使用逗号进行分隔，例如transition-duration: 1s, 2s, 3s;。除此之外，也可以使用一个时间来为所有参与过渡的属性设置过渡所需的时间。

3. transition-timing-function

transition-timing-function 属性用来设置过渡动画的类型，属性的可选值如下：

4. transition-delay

transition-delay 属性用来设置过渡效果何时开始，属性的语法格式如下：
transition-delay: time;
其中，参数 time 用来设置在过渡效果开始之前需要等待的时间，单位为秒或毫秒。

5. transition

transition 属性是上面四个属性的简写形式，通过该属性可以同时设置上面的四个属性，属性的语法格式如下：
transition: transition-property transition-duration transition-timing-function transition-delay;
transition 属性中，transition-property 和 transition-duration 为必填参数，transition-timing-function 和 transition-delay 为选填参数，如非必要可以省略不写。另外，通过 transition 属性也可以设置多组过渡效果，每组之间使用逗号进行分隔，

变形

1 transform属性
在CSS3中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。
到目前为止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。
旋转
使用rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针方向。
transform：rotate（45deg）；
缩放
使用scale方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。
transform：scale（0.5）；//缩小一半
（1）可以分别指定元素的水平方向的放大倍率与垂直方向的放大倍率
transform：scale（0.5，2）；//水平方向缩小一半，垂直方向放大一倍。
倾斜
使用skew方法实现文字或图像的倾斜处理，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。
transform：skew（30deg，30deg）；//水平方向上倾斜30度，垂直方向上倾斜30度。
（1）只使用一个参数，省略另一个参数
这种情况下视为只在水平方向上进行倾斜，垂直方向上不倾斜。
transform：skew（30deg）；
移动
使用translate方法来移动文字或图像，在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。
transform：translate（50px，50px）；// 水平方向上移动50px，垂直方向上移动50px
只使用一个参数，省略另一个参数
这种情况下视为只在水平方向上移动，垂直方向上不移动。
transform：translate（50px）；
对一个元素使用多种变形的方法
transform：translate（150px，200px） rotate（45deg） scale（1.5）；
指定变形的中心点（基准点）
在使用transform方法进行文字或图像变形的时候，是以元素的中心点为基准点进行变形的。
transform-origin属性
transform-origin：x , y , z ;
使用该属性，可以改变变形的基准点。
transform：rotate（45deg）；
transform-origin：left bottom；//把基准点修改为元素的左下角
（1）指定属性值
基准点在元素水平方向上的位置：left、center、right、length、%
基准点在元素垂直方向上的位置：top、center、bottom、length、%
基准点在元素z轴方向上的位置：length

3D转换

1. translate3d()

translate3d() 函数用于移动元素在 3D 空间中的位置，这种变换的特点是通过三维矢量坐标来定义元素在每个方向上（X轴、Y轴、Z轴）的偏移量。函数的语法格式如下：

translate3d(tx, ty, tz)
参数说明如下：

• tx：表示元素在水平方向（X 轴）移动的距离；
• ty：表示元素的垂直方向（Z 轴）移动的距离；
• tz：表示元素在 Z 轴移动的距离，该参数不能使用百分比值。

3D 转换使用的是三维坐标系，但是沿 Z轴方向的移动并不能很明显的显现出来，因为我们往往会将网页看作是一个二维的平面，并没有深度。您可以使用 perspective 和 perspective-origin 属性来为元素添加深度感，即 Z 轴越高的元素显示的越大，反之则越小。

2. translateZ()

函数 translateZ() 用来沿三维坐标系的 Z 轴来移动元素，函数的语法格式如下：

translateZ(tz);
其中参数 tz 用来设置元素在 Z轴上移动的距离。

提示：translateZ(tz); 相当于 translate3d(0, 0, tz); 的简写形式。

3. rotate3d()

rotate3d() 函数用来设置元素沿 X轴、Y轴或 Z轴方向旋转的角度，该函数只会使元素按照固定的轴旋转，不会使元素变形。rotate3d() 函数的语法格式如下：

rotate3d(x, y, z, a)
参数说明如下：

• x：设置旋转轴的 X轴坐标；
• y：设置旋转轴的 Y轴坐标；
• z：设置旋转轴的 Z轴坐标；
• a：设置元素旋转的角度，正角度表示顺时针旋转，负角度表示逆时针旋转。
• 除了 rotate3d() 函数外，CSS 中还提供了 rotateX()（沿 X 轴旋转元素）、rotateY() （沿 Y 轴旋转元素）和 rotateZ()（沿 Z 轴旋转元素）三个函数来按照不同的坐标轴旋转元素。rotateX()、rotateY()、rotateZ() 函数的语法格式如下：

  4. scale3d()

  scale3d() 函数可以改变元素的大小（缩放），函数的语法格式如下：

scale3d(sx, sy, sz)
参数说明如下：

• sx：表示元素在 X 轴方向的缩放比例；
• sy：表示元素在 Y 轴方向的缩放比例；
• sz：表示元素在 Z 轴方向的缩放比例。

提示：当 scale3d() 函数的参数数值超出 [-1，1] 范围时，将在对应的方向上放大元素；当参数值在 [-1，1] 范围内时，将在当前方向上缩小元素；当参数值等于 1 时，则不会改变元素的大小。
除了 scale3d() 函数外，CSS 中还提供了 scaleX()（沿 X 轴缩放元素）、scaleY() （沿 Y 轴缩放元素）和 scaleZ()（沿 Z 轴缩放元素）三个函数来按照不同的坐标轴缩放元素。scaleX()、scaleY()、scaleZ()

5. matrix3d()

matrix3d() 函数与前面我们学习的 matrix() 函数非常相似，不过 matrix3d() 函数可以使用一个 4 × 4 的矩阵来描述一个三维（3D）转换。通过 matrix3d() 函数可以一次执行所有的 3D转换操作，函数的语法格式如下：

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
参数说明如下：

• a1、b1、c1、d1、a2、b2、c2、d2、a3、b3、c3、d3、d4：用来描述各种 3D 转换；
• a4、b4、c4：表示元素变换的量。

动画

@keyframes 规则

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。
要使动画生效，必须将动画绑定到某个元素。

<style>
/* 动画代码 */
@keyframes 动画名 {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
  </style>

注意：animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。
在上面的例子中，通过使用关键字 “from” 和 “to”（代表 0％（开始）和 100％（完成）），我们设置了样式何时改变。
您也可以使用百分比值。通过使用百分比，您可以根据需要添加任意多个样式更改
animation-name: keyframename | none;
keyframename 规定需要绑定到选择器的 keyframe 的名称。
none 规定无动画效果（可用于覆盖来自级联的动画）

<style>
    div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
}
</style>

延迟动画

animation-delay 属性规定动画开始的延迟时间。

<style>
    div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}
</style>

负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。

设置动画应运行多少次

animation-iteration-count 属性指定动画应运行的次数。

<style>
    div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

</style>

使用值 “infinite” 使动画永远持续下去：

反向或交替运行动画

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。
animation-direction 属性可接受以下值：

• normal - 动画正常播放（向前）。默认值
• reverse - 动画以反方向播放（向后）
• alternate - 动画先向前播放，然后向后
• alternate-reverse - 动画先向后播放，然后向前

  <style>
    div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
  }
  </style>
  

指定动画的速度曲线

animation-timing-function 属性规定动画的速度曲线。
animation-timing-function 属性可接受以下值：

• ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
• linear - 规定从开始到结束的速度相同的动画
• ease-in - 规定慢速开始的动画
• ease-out - 规定慢速结束的动画
• ease-in-out - 指定开始和结束较慢的动画
• cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

<style>
    #div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
</style>

指定动画的填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。
在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。
animation-fill-mode 属性可接受以下值：

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

  <style>
    div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  }
  </style>
  

动画简写属性

下例使用六种动画属性:

<style>
    div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
</style>

等同于

<style>
    div {
  animation: example 5s linear 2s infinite alternate;
}
</style>