Web第二次笔记

1.动画-animation

1.1 动画-单状态

必写：
@keyframes：关键帧

html 复制代码

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

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
   /* 定义动画:多状态*/
   @keyframes ani {
     from {
       background-color: red;
     }

     to {
       background-color: blue;
     }
   }

   /* 使用动画 （补帧动画：中间帧会系统自动补全）*/
   div {
     width: 200px;
     height: 200px;
     border: 1px solid #000;
     margin: 100px auto;
     /* animation: 动画名称 动画时间; */
     animation: ani 10s;
   }
 </style>
</head>

<body>
 <div></div>
</body>

</html>

结果：

1.2 动画-多状态

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 定义动画:多状态*/
    @keyframes ani {
      0% {
        background-color: red;
      }

      10% {
        background-color: blue;
      }

      20% {
        background-color: yellow;
      }

      30% {
        background-color: green;
      }

      40% {
        background-color: orange;
      }

      50% {
        background-color: blue;
      }

      60% {
        background-color: yellow;
      }

      70% {
        background-color: green;
      }

    }

    /* 使用动画 （补帧动画：中间帧会系统自动补全）*/
    div {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      /* background-color: pink; */
      /* animation: 动画名称 动画时间; */
      margin: 100px auto;
      animation: ani 10s;
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

1.3 动画-属性

1.3.1 animation-name&animation-duration

css 复制代码

      animation: ani 10s;
      /* 可以写成 */
      animation-name: ani;
      animation-duration: 10s;

1.3.2 animation-delay:延迟显示

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100%;
      height: 600px;
      border: 1px solid #000;
      display: flex;
      justify-content: space-evenly;
      align-items: end;
    }

    .son {

      left: 0;
      bottom: 0;
      width: 50px;
      height: 60px;
      border-radius: 25px;
      background-color: pink;
      animation-name: move;
      animation-duration: 5s;
    }


    @keyframes move {
      0% {
        transform: translateY(0px);
      }

      25% {
        transform: translateY(-400px);
      }

      50% {
        transform: translateY(0px);
      }

      75% {
        transform: translateY(-400px);
      }

      100% {
        transform: translateY(0px);
      }
    }

    .son:nth-child(1) {
      animation-delay: 0s;
    }

    .son:nth-child(2) {
      animation-delay: 0.5s;
    }

    .son:nth-child(3) {
      animation-delay: 1s;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
  </div>
</body>

</html>

1.3.3 animation-fill-mode：动画执行完毕状态（了解）

forwards：最后一帧状态
backwards：第一帧状态

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      animation: move 3s;
      /* 延迟1s后开始动画 */
      animation-delay: 1s;

      /* 动画状态控制 */
      animation-fill-mode: forwards;
    }

    @keyframes move {
      0% {
        transform: translateX(200px);
        background-color: green;
      }

      100% {
        transform: translateX(800px);
        background-color: blue;
      }

    }
  </style>
</head>

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

</html>

1.3.4 animation-time-function:速度曲线

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box:nth-child(1) {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      animation: move 6s;
      /* 延迟1s后开始动画 */
      animation-delay: 1s;

      /* 默认速度曲线 */
      /* 默认：慢-快-慢 */
      /* linear:匀速 */
      animation-timing-function: linear;
    }

    .box:nth-child(2) {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      animation: move 6s;
      /* 延迟1s后开始动画 */
      animation-delay: 1s;

      /* 默认速度曲线 */
      /* animation-timing-function: ; */
    }

    .box:nth-child(3) {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      animation: move 6s;
      /* 延迟1s后开始动画 */
      animation-delay: 1s;

      /* 默认速度曲线  */
      /* steps():不是自动补帧，是逐帧动画 */
      animation-timing-function: steps(8);
    }

    @keyframes move {
      0% {
        transform: translateX(0px);
        background-color: green;
      }

      100% {
        transform: translateX(1000px);
        background-color: blue;
      }

    }
  </style>
</head>

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

</html>

1.3.5 animation-iteration-count：重复次数

infinite为无限循环

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      animation: move 2s;
      /* 延迟1s后开始动画 */
      animation-delay: 1s;

      /* 默认速度曲线 */
      /* 默认：慢-快-慢 */
      animation-iteration-count: infinite;
      animation-fill-mode: forwards;
    }

    @keyframes move {
      0% {
        transform: translateX(0px);
        background-color: yellow;
      }

      50% {
        transform: translateX(1000px);
        background-color: blue;
      }

      100% {
        transform: translateX(0px);
        background-color: yellow;
      }

    }
  </style>
</head>

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

</body>

</html>

1.3.6 animation-direction：动画执行方向

设置为反向播放 :alternate
animation-direction: alternate;

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      animation: move 2s;
      /* 延迟1s后开始动画 */
      animation-delay: 1s;

      /* 播放方向 */
      /* 1.默认按照 设置关键帧顺序播放 */
      /* 2.设置为反向播放 :alternate*/
      animation-direction: alternate;
      animation-iteration-count: infinite;
    }

    @keyframes move {
      0% {
        transform: translateX(0px);
        background-color: yellow;
      }

      100% {
        transform: translateX(1000px);
        background-color: blue;
      }

      /* 100% {
        transform: translateX(0px);
        background-color: yellow;
      } */

    }
  </style>
</head>

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

</body>

</html>

1.3.7 animation-play-state:播放状态（暂停）

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      animation: move 2s;
      /* 延迟1s后开始动画 */
      animation-delay: 1s;

      /* 播放方向 */
      /* 1.默认按照 设置关键帧顺序播放 */
      /* 2.设置为反向播放 :alternate*/
      /* 了解补充：反向reverse : anmation-direction:reverse; */
      animation-direction: alternate;
      animation-iteration-count: infinite;
    }

    /* 配合鼠标进入的时候动画暂停 */
    .box:hover {
      animation-play-state: paused;
    }

    @keyframes move {
      0% {
        transform: translateX(0px);
        background-color: yellow;
      }

      100% {
        transform: translateX(1000px);
        background-color: blue;
      }

      /* 100% {
        transform: translateX(0px);
        background-color: yellow;
      } */

    }
  </style>
</head>

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

</body>

</html>