大前端笔记

 7) 动画特效  
    1. 动画
      设计师；美工；前端（实现）
      动态网站（具有动画 错误！）是数据是动态的。
      
      1) 实现步骤
        1. 定义动画帧
          @keyframes 动画名{
            from {
              // 开始帧
            }
            to {
              // 结束帧
            }
          }

          @keyframes 动画名{
            0% {
              // 开始帧
            }
            20% {

            }
            ...
            100% {
              // 结束帧
            }
          }
        2. 设定动画（贺卡）
          animation-name: move; 
            动画名
          animation-duration: 2s;
            持续时间
          animation-timing-function: linear;
            时间曲线函数（自由落体，贝塞尔曲线）
          animation-fill-mode:forwards;
            填充模式，动画结束后保留哪一帧规则
          animation-iteration-count: 2;  
            动画迭代次数 infinite
          animation-direction: alternate-reverse;   
            动画执行的方向 from->to , to->from
          animation-play-state: paused;
            动画状态
          animation-delay: 1s;
            延迟时间
          animation: move 2s 1s 2 linear;
            动画的速写形式
      2) 案例（呼吸灯）
      3) 案例（梦幻西游）
    2. 动画库 animate.css
      动画帧、动画设定规则都有第三方完成，我们直接使用class即可
      1) 引入动画库
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.css">
      2) 使用
        1. 直接调用动画设定类
          <div class="box animate__animated animate__infinite animate__bounce"></div>
        2. 引用关键帧
          <style>
            .bounce {
              animation: flash 10s linear infinite;
            }
          </style>
          <div class="box bounce"></div>
    3. 过渡
      过渡是轻量级的动画，过渡中无需定义关键帧，它解决的问题是当属性改变的时候实行缓缓改变。一般通过伪类来触发。过渡一定发生在属性值改变上（状态发生变化的时候）
      transition-property: width;
        过渡属性，取值可以为多个，多个值通过逗号分割；关键字：all 所有属性
      transition-duration: 2s;
        过渡持续时间
      transition-delay: 0; 
        过渡延迟时间
      transition-timing-function: linear; 
        时间曲线函数
      transition:transform,background-color 2s,2s 0s linear;
        速写形式
    4. 变形
      transform:变形函数
      1. 缩放
        scale(2)
      2. 平移
        translate(100px,50px)
      3. 旋转
        rotate(360deg)
      4. 拉伸
        skew(45deg)
  8) 媒体查询（响应式布局）
    pc、 pad 、phone (中小型网页)
      一套网页(pc、pad、phone)