CSS3：前置特性

CSS3：盒子模型

CSS3：图片滤镜与模糊处理

blur()：高斯模糊

CSS3：计算盒子宽度calc()函数

CSS3：过渡效果

transition属性

2D转换：transform属性

translate()方法

* translate应用：结合定位实现水平+垂直居中

rotate()方法

*rotate应用案例：结合transition过渡实现盒子过渡旋转

*rotate应用案例：绘制倒三角

转换中心点：transform-origin属性

* rotate + transform-origin：旋转案例

scale()方法

使用多个2D转换

CSS3：动画（animation）

定义动画：@keyframes 规则

*动画案例：运动的DOM元素

动画序列

*动画序列案例：转圈的DOM元素

动画常见属性

动画速度曲线

* 速度曲线案例：进度条分步长加载

CSS3：前置特性

CSS3：盒子模型

CSS3中可以通过borde-sizing来指定盒模型，属性值有2个：context-box、border-box，其中：

①context-box：盒子大小的计算方式为-width+padding+border（传统默认方式）；

②border-box：盒子大小的计算方式为-width。

属性值为border-box的盒子，可以避免由于指定了padding和border属性值时，盒子会被撑大的问题。

CSS3：图片滤镜与模糊处理

CSS3提供了filter属性，可以实现DOM元素的模糊或者颜色偏移等视觉效果。filter属性值默认为none,即：没有任何特殊效果。

除了下面介绍的高斯模糊效果，其它方法可参考：CSS3 filter(滤镜) 属性 | 菜鸟教程。

blur()：高斯模糊

blur()可以实现高斯模糊，并且，blur()函数的参数越大、模糊度越高。

如下示例代码，实现图片的高斯模糊处理，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>高斯模糊</title>
  <style>
    img{
      filter: blur(3px);
    }
  </style>
</head>
<body>
  <img src="./images/hu.jpg" alt="">
</body>
</html>

CSS3：计算盒子宽度calc()函数

CSS3中提供了calc()函数，可以实现width、height等宽高属性的数学计算，括号内部可以实现基本的+、-、*、\运算。

如下所示，定义Div盒子的宽度比视口宽度永远小80px。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>calc-计算盒子宽高属性</title>
  <style>
    .calc{
      margin: 0 auto;
      width: calc(100% - 80px);
      height: 150px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="calc"></div>
</body>
</html>

CSS3：过渡效果

CSS3的过渡效果，可以使我们在无需使用Flash和JavaScript的情况下，实现元素从一种状态转换为另一种状态时，提供一种视觉上的过渡效果。

所谓过渡效果，也称过渡动画，是指：从一个状态，渐渐过渡到另一个状态。可以使我们的网页页面切换时，更加流畅，无缝衔接，极具体验感，同时又不会影响页面布局。

transition属性

transition属性用于设置DOM元素的过渡效果。而要实现过渡效果，必须指定两项内容：添加效果的CSS属性、效果的持续时间。该属性的4个属性值参数为，

transition：过渡属性花费时间运动曲线开始时间。

上述4个参数的取值可参考：CSS3 transition 属性 | 菜鸟教程。

如下代码，实现了在鼠标滑过div盒子时，其width宽度属性，从100px到400px变化的过渡效果，延迟0.0s执行，持续时间为0.5s。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3-过渡效果</title>
  <style>
    .trans{
      width: 100px;
      height: 50px;
      background-color: skyblue;
      /* 使用过渡效果 */
      transition: width 0.5s ease 0.0s;
    }
    .trans:hover{
      width: 400px;
    }
  </style>
</head>
<body>
  <div class="trans"></div>
</body>
</html>

2D转换：transform属性

transform属性是CSS3中具有颠覆性的特征之一，可以实现元素的移动、缩放、旋转、拉伸等效果。

translate()方法

已知的可以实现盒子移动的方法有：定位（position）、外边距（margin），现在可以通过2D转换的translate()方法，根据指定的X轴和Y轴位置给定的参数，实现元素的位置移动。

如下代码，可以使得div盒子，向X轴方向移动100px,向Y轴方向移动200px的效果，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2D转换</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }
    .translate{
      /* 向X轴方向移动100px,向Y轴方向移动200px */
      transform: translate(100px,200px);
      -ms-transform: translate(100px,200px);/*IE9*/
      -webkit-transform: translate(100px,200px);/*safari,chrome */
    }

  </style>
</head>
<body>
  <!-- 移动 -->
  <div class="translate"></div>
</body>
</html>

translate()方法最大的优点是：不会影响其它盒子的位置，即：translate中的百分比是相对于自身元素的translate：（50%，50%），只会修改自身的位置，而不会影响其它盒子的位置。一个注意点是：translate()属性对于行内标签无效。

* translate应用：结合定位实现水平+垂直居中

translate()方法的参数可以是百分比，此时，百分比的计算是相对于盒子的宽高而言的。

translate()方法的一个实际应用场景是：结合position定位，实现DOM元素的水平和垂直居中效果。示例代码如下，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2D转换</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }
    /* 盒子水平和垂直居中 */
    .center{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

  </style>
</head>
<body>
  <!-- div盒子水平+垂直居中 -->
  <div class="center"></div>
</body>
</html>

rotate()方法

rotate()方法可以实现DOM元素在二维平面中的旋转效果，给定一个正的度数，向顺时针旋转，单位为deg。

如下代码，实现div元素的顺时针渲染45度。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS-旋转</title>
  <style>
    div{
      margin: 100px auto;
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }
    .rotate{
      /* 顺时针旋转45度 */
      transform: rotate(45deg);
      -ms-transform: rotate(45deg);/*IE9*/
      -webkit-transform: rotate(45deg);/*safari,chrome */
    }

  </style>
</head>
<body>
    <div class="rotate"></div>
</body>
</html>

*rotate应用案例：结合transition过渡实现盒子过渡旋转

效果描述：当属性悬浮在div上面时，div盒子从原始的旋转45度，逐渐过渡到旋转360度，延时0.5s执行，持续时间为1.0s。

示例代码如下，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS-旋转</title>
  <style>
    div{
      margin: 100px auto;
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }
    .rotate{
      /* 顺时针旋转45度 */
      transform: rotate(45deg);
      -ms-transform: rotate(45deg);/*IE9*/
      -webkit-transform: rotate(45deg);/*safari,chrome */
      transition: transform 1.0s ease 0.5s;
    }
    .rotate:hover{
      transform: rotate(360deg);
    }

  </style>
</head>
<body>
    <div class="rotate"></div>
</body>
</html>

*rotate应用案例：绘制倒三角

rotate()属性，结合transition过渡属性，可以实现鼠标滑过时候的倒三角效果。

示例代码如下，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>旋转-倒三角效果</title>
  <style>
    .trani{
      position: relative;
      width: 150px;
      height: 35px;
      border: 1px solid #ccc;
    }
    .trani::after{
      content: "";
      position: absolute;
      right: 7px;
      top: 7px;
      display: inline-block;
      width: 10px;
      height: 10px;
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      transform: rotate(45deg);
      transition: transform 0.5s ease 0.1s;
    }
    .trani:hover::after{
      transform: rotate(225deg);
    }
  </style>
</head>
<body>
  <div class="trani"></div>  
</body>
</html>

转换中心点：transform-origin属性

可以通过transform-origin属性，设置元素2D转换的中心点。基本语法如下，

transform-origin:x y;

其中：x y默认是元素的中心点（50%，50%），但是我们可以通过transform-origin属性，设置自定义的中心点。其取值可以是像素值，或者是方位名词left、top、right、bottom、center。

* rotate + transform-origin：旋转案例

示例代码如下，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>旋转案例</title>
  <style>
    .box{
      width: 150px;
      height: 150px;
      border: 1px solid #fff;
      background-color: #ccc;
      /* 溢出隐藏 */
      overflow: hidden;
    }
    .inner{
      width: 100%;
      height: 100%;
      /* 文字水平垂直居中 */
      color: #fff;
      font-weight: 700;
      font-size: 24px;
      text-align: center;
      line-height: 150px;
      background-color: skyblue;
      /* 设置旋转中心点位左下角 */
      transform-origin: left bottom;
      transform: rotate(90deg);
      /* 设置过渡效果 */
      transition: transform 1.0s ease 0.1s;
    }
    .box:hover .inner{
      transform: rotate(0deg);
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="inner">Box</div>
  </div>
</body>
</html>

scale()方法

scale()方法可以实现元素的宽度width+高度height的缩放效果。相比基于transition过渡效果直接操作width、height宽高属性来说，可以实现等比缩放，并且不会影响其它盒子，并且可以设置缩放的中心点。

基本语法规则为：

transform: scale(x,y);

如下示例代码，可以实现相对于元素的本身1.2倍的等比缩放。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>scale缩放</title>
  <style>
    .scale{
      margin: 200px auto;
      width: 200px;
      height: 200px;
      border: 1px solid #ccc;
      background-color: skyblue;
      /* 过渡效果 */
      transition: transform 1.5s ease 0.1s;
    }
    .scale:hover{
      /* 等比扩大1.2倍 */
      transform: scale(1.2,1.2);
    }

  </style>
</head>
<body>
  <div class="scale"></div>
</body>
</html>

使用多个2D转换

同时使用多个2D转换时，基本语法格式为：

transform: translate() rotate() scale()...等;

注意：transform属性值中的方法的顺序，会影响转换的效果。当同时有位置和其它属性的时候，记得应当将位移translate()方法放在最前面。

CSS3：动画（animation）

动画（animation）是CSS3中最具有颠覆性的特征之一，可通过设置多个节点，来精确控制一个或者一组动画，常用来实现复杂的动画效果。

相比transition过渡属性，动画可以实现更多变化，更多控制，连续自动播放等效果。

例如：如下的跑马灯效果，就可以通过CSS3动画实现。

定义动画：@keyframes 规则

想要定义一个动画，需要了解@keyframes规则。

@keyframes规则是创建动画；而在@keyframes规则内部，可以指定一个样式和动画，实现从当前样式到目标样式的逐步过渡。

@keyframes规则的基本格式如下，

@keyframes 动画名称{
    0%{
        width:100px;
    }
    100%{
        width:200px;
    }
}

其中：0%对应起始时DOM元素的样式；100%对应结束时DOM元素的样式。

*动画案例：运动的DOM元素

如下代码，实现了这样的动画效果：当页面渲染时，div盒子就从页面的左边运动到右边。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画定义</title>
  <style>
    .animation {
      width: 150px;
      height: 150px;
      border: 1px solid #ccc;
      background-color: skyblue;
      /* 使用动画 */
      animation-name: move;
      /* 动画的持续时间 */
      animation-duration: 3s;
    }

    @keyframes move {
      /* 开始时的动画 */
      0% {
        transform: translateX(0px);
      }
      /* 结束时的动画 */
      100% {
        transform: translateX(1600px);
      }
    }
  </style>
</head>

<body>
  <div class="animation"></div>
</body>

</html>

动画序列

在CSS3中，只要@keyframes中规定了某项CSS样式，就能由当前样式逐渐改变到新样式的动画效果。

一个完整的动画，是由若干个动画序列组成的，其中：0%表示动画的开始，100%表示动画的结束，中间可以创建任意多个样式效果，这样的@keyframes规则，就定义了一个动画序列。

除了上面例子中，0%和100%的写法，也可以使用from和to的关键字，来定义起始、终止动画的样式，两者对于简单动画来讲是等价的。

*动画序列案例：转圈的DOM元素

动画效果如上，示例代码如下，

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画序列</title>
  <style>
    .animation {
      width: 150px;
      height: 150px;
      border: 1px solid #ccc;
      background-color: skyblue;
      /* 使用动画 */
      animation-name: move;
      /* 动画的持续时间 */
      animation-duration: 5s;
    }

    @keyframes move {
      /* 开始时的动画 */
      0% {
        transform: translate(0px, 0px);
      }
      25% {
        transform: translate(1700px, 0px);
      }
      50% {
        transform: translate(1700px, 800px);
      }
      75% {
        transform: translate(0px, 800px);
      }
      /* 结束时的动画-回到原点 */
      100% {
        transform: translate(0px, 0px);
      }
    }
  </style>
</head>

<body>
  <div class="animation"></div>
</body>

</html>

动画常见属性

常见的动画属性如下，

基于以上动画属性，例如：为上面的转圈的DOM元素添加animation-iteration-count:infinite，使其可以循环播放。也可以通过绑定按钮的点击事件，通过修改animation-play-state属性，来控制动画的运行或者停止状态。

动画速度曲线

在常见的动画属性中有一个较为有意思的属性：animation-timing-function，即：动画的速度曲线。该属性的默认值是：ease，但是也存在着其它的属性值。

例如，我们可以通过设置steps属性值，来规定整个动画分几步执行。

* 速度曲线案例：进度条分步长加载

下面，我们看一个如上图所示的例子：进度条，分成100个步长来执行进度条加载；并且，当鼠标悬浮到进度条上面时，暂时停止进度条加载，示例代码如下，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画-速度曲线</title>
  <style>
    .box{
      margin: 0 auto;
      width: 200px;
      height: 25px;
      border: 1px solid #ccc;
      background-color: #ccc;
      border-radius: 5px;
    }
    /* 鼠标悬浮在box上面时,暂时停止动画 */
    .box:hover::after{
        animation-play-state: paused;
    }
    .box::after{
      content: "";
      display: inline-block;
      width: 0%;
      height: 100%;
      background-color: skyblue;
      border-radius: 5px;
      /* 设置动画名称 */
      animation-name: progress;
      /* 设置动画持续时间 */
      animation-duration: 10s;
      /* 设置步长：进度条到100%,那么可设置步长为100 */
      animation-timing-function: steps(100);
      /* 设置循环动画 */
      animation-iteration-count: infinite;
    }
    /* 进度条动画 */
    @keyframes progress{
        from{
          width: 0%;
        }
        to{
          width: 100%;
        }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

matrix