01-HTML+CSS/17-形变-动画-vertical-align

形变-动画-vertical-align

transform

对某一个元素进行某些形变，包括旋转，缩放，倾斜或平移等
transform是形变的意思，transformer就是变形金刚
并非所有的盒子都可以进行transform的转换(通常行内级元素不能进行形变)
transform对于行内级非替换元素是无效的

常见的函数transform function有

平移: translate(x, y)
缩放: scale(x, y)
旋转: rotate(deg)
倾斜: skew(deg, deg)

translate

平移：translate(x, y)
- 这个css函数用于移动元素在平面上的位置
- translate本身可以表示翻译的意思，在物理上也可以表示平移
值的个数
- 一个值
  - 设置x轴上的位移
- 二个值
  - 设置x轴和y轴上的位移
值类型
- 数字
  - 100px
- 百分比
  - 参照元素本身

<!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>Document</title>
    <style>
      .container {
        display: inline-block;
        border: 5px solid #f00;
      }

      .container .box {
        width: 200px;
        height: 200px;
        background-color: orange;
        transform: translate(100px);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

<!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>Document</title>
    <style>
      .container {
        display: inline-block;
        border: 5px solid #f00;
      }

      .container .box {
        width: 200px;
        height: 200px;
        background-color: orange;
        transform: translate(100px, 100px);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

<!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>Document</title>
    <style>
      .container {
        display: inline-block;
        border: 5px solid #f00;
      }

      .container .box {
        width: 200px;
        height: 200px;
        background-color: orange;
        /* 百分比相对于自身的 */
        transform: translate(100%, 100%);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

水平居中

行内级
- text-align: center
块级元素
- margin: 0 auto;
绝对定位
- 有宽度的情况下，left: 0;/right: 0;/margin: 0 atuo;
flex
- justify-content: center;

垂直居中

绝对定位
- 有高度的情况下，top: 0;/bottom: 0;/marign: auto 0;

<!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>Document</title>
    <style>
      .container {
        position: relative;
        height: 300px;
        background-color: orange;
      }

      .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

flex布局

<!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>Document</title>
    <style>
      .container {
        display: flex;
        align-items: center;
        height: 300px;
        background-color: orange;
      }

      .box {
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">box</div>
    </div>
  </body>
</html>

top和transforom

<!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>Document</title>
    <style>
      .container {
        position: relative;
        height: 300px;
        background-color: orange;
      }

      .box {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">box</div>
    </div>
  </body>
</html>

scale

缩放: scale(x, y)
- css函数可改变元素的大小
值个数
- 一个值
  - 设置x轴上的缩放
- 二个值
  - 设置x轴和y轴上的缩放
值类型
- 数字
  - 1 保持不变
  - 2 放大一倍
  - 0.5 缩小一般
- 百分比
  - 百分比不常用

<!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>Document</title>
    <style>
      body {
        text-align: center;
        padding-top: 200px;
      }

      .container {
        display: inline-block;
        border: 5px solid #f00;
      }

      .box {
        width: 200px;
        height: 200px;
        background-color: orange;
        transform: scale(0.6, 0.6);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

<!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>Document</title>
    <style>
      body {
        text-align: center;
        padding-top: 200px;
      }

      .container {
        display: inline-block;
        border: 5px solid #f00;
      }

      .box {
        width: 200px;
        height: 200px;
        border: 10px solid #0f0;
        background-color: orange;
        transform: scale(0.6, 0.6);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

<!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>Document</title>
    <style>
      body {
        text-align: center;
        padding-top: 200px;
      }

      .container {
        display: inline-block;
        border: 20px solid #f00;
      }

      .box {
        width: 200px;
        height: 200px;
        border: 20px solid #0f0;
        background-color: orange;
        transform: scale(0.6, 0.6);
      }

      .box:hover {
        transform: scale(1.1, 1.1);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

rotate

旋转 rotate(deg)
值个数
- 一个值时，表示旋转的角度
值类型
- 常用单位deg
- 正数为顺时针
- 负数为逆时针

<!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>Document</title>
    <style>
      body {
        text-align: center;
        padding-top: 200px;
      }

      .container {
        display: inline-block;
        border: 10px solid #f00;
      }

      .box {
        width: 200px;
        height: 100px;
        background-color: orange;
      }

      .box:hover {
        transform: rotate(90deg);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

<!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>Document</title>
    <style>
      body {
        text-align: center;
        padding-top: 200px;
      }

      .container {
        display: inline-block;
        border: 10px solid #f00;
      }

      .box {
        width: 200px;
        height: 100px;
        background-color: orange;
      }

      .box:hover {
        transform: rotate(45deg);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

<!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>Document</title>
    <style>
      body {
        text-align: center;
        padding-top: 200px;
      }

      .container {
        display: inline-block;
        border: 10px solid #f00;
      }

      .box {
        width: 200px;
        height: 100px;
        background-color: orange;
      }

      .box:hover {
        transform: rotate(-45deg);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

transform-origin

transform-origin
- 形变的原点
一个值
- 设置x轴的原点
- 第二默认值是center
两个值
- 设置x轴和y轴的原点
值类型
- left center right bottom关键字
- length
- 百分比

<!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>Document</title>
    <style>
      body {
        text-align: center;
        padding-top: 200px;
      }

      .container {
        display: inline-block;
        border: 10px solid #f00;
      }

      .box {
        width: 200px;
        height: 100px;
        background-color: orange;
        /* 默认值 */
        /* transform-origin: center center; */
        /* transform-origin: center; */
        /* 修改 */
        /* transform-origin: left top; */
        /* transform-origin: center top; */
        transform-origin: 20px 20px;
      }

      .box:hover {
        transform: rotate(45deg) scale(0.5);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

<!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>Document</title>
    <style>
      body {
        text-align: center;
        padding-top: 200px;
      }

      .container {
        display: inline-block;
        border: 10px solid #f00;
      }

      .box {
        width: 200px;
        height: 100px;
        background-color: orange;
        /* 默认值 */
        /* transform-origin: center center; */
        /* transform-origin: center; */
        /* 修改 */
        /* transform-origin: left top; */
        /* transform-origin: center top; */
        /* transform-origin: 20px 20px; */
        /* transform-origin: 10% 10%; */
        transform-origin: 10%;
      }

      .box:hover {
        transform: rotate(45deg) scale(0.5);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

skew

倾斜 skew(x, y)
- 函数定义了一个元素在二维平面上的倾斜转换
值个数
- 一个值
  - x轴上的倾斜
- 二个值
  - x轴和y轴上的倾斜
值类型
- deg 倾斜的角度

<!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>Document</title>
    <style>
      .box {
        font-style: italic;
        width: 200px;
        height: 100px;
        background-color: orange;
      }

      .box:hover {
        transform: skew(10deg, 10deg);
      }
    </style>
  </head>
  <body>
    <div class="box">我是div元素</div>
  </body>
</html>

transform多个值

<!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>Document</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: orange;
      }

      .box:hover {
        transform: translateX(50px) scale(1.2) rotate(45deg);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

transition

认识transition动画

什么是transition动画呢

css transition提供了一种在更改css属性时控制动画的方法
可以让css属性变化成为一个持续一段时间的过程，而不是立即生效
比如讲一个元素从一个位置移动到另一个位置，默认在修改完css属性后会立即生效
但是我们可以通过css transition，让这个过程加上一定的动画效果，包括一定的曲线速率变化

通常将两个状态之间的过渡称为隐式过渡，因为开始与结束之间的状态由浏览器决定

css transition可以决定

那些属性发生动画效果
何时开始
持续多久
如果动画

transform

transition-property
transition-duration
transition-timing
transition-timing-function
transition-delay

<!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>Document</title>
    <style>
      .box {
        position: relative;
        left: 0;
        width: 200px;
        height: 100px;
        background-color: orange;
        transition: left 2s;
      }

      .box:hover {
        left: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        position: relative;
        left: 0;
        width: 200px;
        height: 100px;
        background-color: orange;
        /* transition: left 2s; */
        transition-property: left;
        transition-duration: 1s;
        transition-timing-function: ease-in;
      }

      .box:hover {
        left: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: orange;
        /* transition: left 2s; */
        transition-property: transform;
        transition-duration: 1s;
        transition-timing-function: ease-in;
      }

      .box:hover {
        transform: translate(100px);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: orange;
        /* transition: left 2s; */
        transition-property: transform;
        transition-duration: 1s;
        transition-timing-function: ease-in;
        transition-delay: 2s;
      }

      .box:hover {
        transform: translate(100px);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: orange;
        transition-property: all;
        transition-duration: 1s;
        transition-timing-function: ease-in;
        transition-delay: 1s;
      }

      .box:hover {
        transform: translate(100px);
        width: 500px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: orange;
        transition: all 1s ease-in 1s;
      }

      .box:hover {
        transform: translate(100px);
        width: 500px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

<!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>Document</title>
    <style>
      .container {
        background-color: #f00;
      }

      .box {
        width: 200px;
        height: 100px;
        background-color: orange;
        transition: all 1s ease-in 1s;
      }

      .container:hover .box {
        transform: translate(100px);
        width: 500px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

词汇解读

transform

transform是形变
- 一个css属性，该css属性用设置形变
- 后面的值是形变的函数，比如scale，rotate，translate

translate

translate是tranform的其中一个tranform-function
用于对元素进行平移

rotate

rotate是缩放

skew

skew是倾斜

transition

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>Document</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: orange;
        transition: width 2s;
      }

      .box:hover {
        width: 400px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

animation

transition的缺点

只能定义开始和结束装填，不能定义中间状态，也就是说只有两个状态
不能重复执行，除非一再触发动画
需要在特定状态下会触发才能执行，比如某个属性被修改了

animation的使用步骤

使用@keyframes定义动画序列
配置动画执行的名称、持续时间、动画曲线、延迟、执行次数、方向等等

属性

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

animation属性.png

<!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>Document</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: orange;
        animation: moveAnim 2s;
      }

      @keyframes moveAnim {
        0% {
          transform: translate(0, 0);
        }
        25% {
          transform: translate(0, 200px);
        }
        50% {
          transform: translate(400px, 200px);
        }
        75% {
          transform: translate(400px, 0);
        }
        100% {
          transform: translate(0, 0);
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: orange;
        animation: moveAnim 2s;
      }

      @keyframes moveAnim {
        0% {
          transform: translate(0, 0) scale(0.5);
        }
        33% {
          transform: translate(0, 200px) scale(1.2);
        }
        66% {
          transform: translate(400px, 200px) scale(1);
        }
        100% {
          transform: translate(400px, 0) scale(0.5);
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: orange;
        /* animation: moveAnim 2s; */
        animation-name: moveAnim;
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-delay: 2s;
        animation-iteration-count: 2;
        animation-direction: reverse;
        /* animation-fill-mode: forwards; */
        animation-fill-mode: backwards;
        /* 一般通过JavaScript控制 */
        animation-play-state: running;
      }

      @keyframes moveAnim {
        0% {
          transform: translate(0, 0) scale(0.5);
        }
        33% {
          transform: translate(0, 200px) scale(1.2);
        }
        66% {
          transform: translate(400px, 200px) scale(1);
        }
        100% {
          transform: translate(400px, 0) scale(0.5);
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: orange;
        /* animation-name: moveAnim;
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-delay: 2s;
        animation-iteration-count: 2;
        animation-direction: reverse;
        animation-fill-mode: backwards;
        animation-play-state: running; */
        /* animation: name duration timing-function delay iteration-count direction fill-mode; */
        animation: moveAnim 3s ease-in-out 2s 2 reverse backwards;
      }

      @keyframes moveAnim {
        0% {
          transform: translate(0, 0) scale(0.5);
        }
        33% {
          transform: translate(0, 200px) scale(1.2);
        }
        66% {
          transform: translate(400px, 200px) scale(1);
        }
        100% {
          transform: translate(400px, 0) scale(0.5);
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

行盒

<!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>Document</title>
    <style>
      .box {
        background-color: orange;
      }

      .small {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="box">
      我是div元素<span class="small"></span> ipsum dolor, sit amet consectetur
      adipisicing elit. Sed laborum libero numquam! Unde error temporibus,
      adipisci voluptatem, assumenda, illum quo exercitationem beatae facere
      expedita tempora mollitia nemo autem fuga non?
    </div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        background-color: orange;
      }

      .small {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="box">
      我是div元素<span class="small">123</span> ipsum dolor, sit amet consectetur
      adipisicing elit. Sed laborum libero numquam! Unde error temporibus,
      adipisci voluptatem, assumenda, illum quo exercitationem beatae facere
      expedita tempora mollitia nemo autem fuga non?
    </div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        background-color: orange;
      }

      .box img {
        width: 200px;
        vertical-align: top;
      }
    </style>
  </head>
  <body>
    <div class="box">
      我是普通的文本，dfjsdjf
      <img src="./images/kobe01.jpg" alt="" />
    </div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        background-color: orange;
      }

      .box img {
        width: 200px;
      }

      .box .small {
        width: 100px;
        height: 200px;
        display: inline-block;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="box">
      我是普通的文本，dfjsdjf
      <img src="./images/kobe01.jpg" alt="" />
      <span class="small"></span>
    </div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        background-color: orange;
      }

      .box img {
        width: 200px;
      }

      .box .small {
        width: 100px;
        height: 200px;
        display: inline-block;
        background-color: #f00;
        margin-bottom: 30px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      我是普通的文本，dfjsdjf
      <img src="./images/kobe01.jpg" alt="" />
      <span class="small"></span>
    </div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        background-color: orange;
      }

      .box img {
        width: 200px;
      }

      .box .small {
        width: 100px;
        height: 200px;
        display: inline-block;
        background-color: #f00;
        margin-bottom: 30px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      我是普通的文本，dfjsdjf
      <img src="./images/kobe01.jpg" alt="" />
      <span class="small">aaa</span>
    </div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./images/kobe01.jpg" alt="" />
    </div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="box"><img src="./images/kobe01.jpg" alt="" />dnf</div>
  </body>
</html>

vertical-align

默认值
- baseline

<!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>Document</title>
    <style>
      .box {
        background-color: orange;
      }

      .box img {
        width: 200px;
        vertical-align: middle;
      }

      .box .small {
        width: 100px;
        height: 200px;
        display: inline-block;
        background-color: #f00;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div class="box">
      我是普通的文本，dfjsdjf
      <img src="./images/kobe01.jpg" alt="" />
      <span class="small"></span>
    </div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        background-color: orange;
      }

      .box img {
        vertical-align: top;
      }
    </style>
  </head>
  <body>
    <div class="box"><img src="./images/kobe01.jpg" alt="" />dnf</div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        background-color: orange;
      }

      .box img {
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div class="box"><img src="./images/kobe01.jpg" alt="" />dnf</div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        background-color: orange;
      }

      .box img {
        vertical-align: bottom;
      }
    </style>
  </head>
  <body>
    <div class="box"><img src="./images/kobe01.jpg" alt="" />dnf</div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        background-color: orange;
      }

      .box img {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="box"><img src="./images/kobe01.jpg" alt="" /></div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        background-color: orange;
      }

      .box img {
        width: 200px;
        vertical-align: middle;
      }

      .box .small {
        width: 100px;
        height: 200px;
        display: inline-block;
        background-color: #f00;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div class="box">
      我是普通的文本，dfjsdjf
      <img src="./images/kobe01.jpg" alt="" />
      <span class="small">理解快递费静安寺福建烤老鼠佳都科技塑料袋减肥j</span>
    </div>
  </body>
</html>

内容回顾

一、transform

1.1.transform作用以及语法

1.2.translate(x, y)

1.3.translate的百分比(总结垂直居中的方案)

利用百分比做垂直居中

1.4.scale(x, y)

1.5.rotate(x, y)

deg
- 正值
  - 顺时针
- 负值
  - 逆时针
rad

1.6.transform-origin

修改形变的坐标原点

1.7.skew倾斜

1.8.transform设置多个值

二、transition

2.1.理解过渡动画

哪些是可执行动画的属性

2.2.过渡常见属性

transition-property
transition-duration
transition-timing-function
transition-delay

2.4.总结几个单词的作用

transform
translate
transition

三、animation

3.1.transition弊端和animation介绍

3.2.animation的使用过程

@keyframes 定义每一帧的属性
animation属性
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state

四、vertical-align

4.1.行盒的概念

4.2.vertical-aligin默认对齐baseline

4.3.解释了多个对齐的现象

课后作业

一. 完成课堂所有的代码练习

二. 说出常见的CSS Transform形变有哪些

补充: 说出transform/translate/transition分别的作用

三. 说出CSS Transition和Animation动画的区别

四. 理解vertical-align的作用和行盒的理解

五. 完成小米布局中的动画效果

六. 自己找一个包含动画的网页案例(比如考拉页面)

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,013评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,205评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,370评论 0赞 342
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,168评论 1赞 278
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,153评论 5赞 371
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,954评论 1赞 283
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,271评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,916评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,382评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,877评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,989评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,624评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,209评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,199评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,418评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,401评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,700评论 2赞 345

01-HTML+CSS/17-形变-动画-vertical-align

形变-动画-vertical-align

transform

translate

水平居中

垂直居中

scale

rotate

transform-origin

skew

transform多个值

transition

认识transition动画

词汇解读

宽度变化的方向

animation

行盒

vertical-align

内容回顾

一、transform

1.1.transform作用以及语法

1.2.translate(x, y)

1.3.translate的百分比(总结垂直居中的方案)

1.4.scale(x, y)

1.5.rotate(x, y)

1.6.transform-origin

1.7.skew倾斜

1.8.transform设置多个值

二、transition

2.1.理解过渡动画

2.2.过渡常见属性

2.4.总结几个单词的作用

三、animation

3.1.transition弊端和animation介绍

3.2.animation的使用过程

四、vertical-align

4.1.行盒的概念

4.2.vertical-aligin默认对齐baseline

4.3.解释了多个对齐的现象

课后作业

一. 完成课堂所有的代码练习

二. 说出常见的CSS Transform形变有哪些

补充: 说出transform/translate/transition分别的作用

三. 说出CSS Transition和Animation动画的区别

四. 理解vertical-align的作用和行盒的理解

五. 完成小米布局中的动画效果

六. 自己找一个包含动画的网页案例(比如考拉页面)

推荐阅读更多精彩内容