交互动效设计

分为三个部分：

1.变换 2. 动画 3. 动效案例

1. 变换

【1】场景

【2】坐标系

1.2 2D变换

translateX(50%)与left(50%)区别

前者：自身的50%

后者：盒子的50%

1.2.1 2D变换之平移

【1】语法

【2】案例

1.2.2 2D变换之旋转

【1】语法

【2】代码

html 复制代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      width: 200px;
      border-radius: 50%;
      border: 1px solid #000;
      margin: 130px;
      /* 过渡写在img是鼠标离开时也会慢慢恢复原样 */
      /* transition: all 1s; */
      /* 也可以改变旋转的中心点 */
      transform-origin: left;
    }

    img:hover {
      /* 过渡如果写在:hover 里，鼠标离开时会快速恢复原样 */
      transition: all 1s;
      transform: rotate(360deg);
    }
  </style>
</head>

<body>
  <img src="../images/cat1.jpg" alt="">
</body>

注意事项：

1.行内元素不可以旋转，要么display:block;要么display:inline block;

即转换为块级元素或者行内块级元素

2.鼠标过渡加在不同位置的区别

1.2.3 2D变换之缩放

【1】语法

html 复制代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: pink;
      transition: all 0.5s;
    }

    .box2 {
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }

    .box1:hover {
      /* 特点不影响其他盒子的布局 */
      transform: scale(1.5);
    }
  </style>
</head>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

1.2.4 2D变换之倾斜

【1】语法

html 复制代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 55px;
      text-align: center;
      line-height: 55px;
      color: #fff;
      background-color: pink;
      /* 倾斜效果 */
      /* 字体也会倾斜 */
      transform: skewX(-16deg);
    }

    .card {
      width: 240px;
      height: 280px;
      margin: 50px;
      /* 子绝父相 */
      /* 这样儿子的定位就会以父盒子为参考点 */
      position: relative;
    }

    .card div {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 0px 30px 40px 40px;
      /* 调整一下倾斜中心为左上角 */
      transform-origin: top left;
      /* 添加过渡效果 */
      transition: all 0.5s;
    }

    .card .front {
      /* 想让这个透明的在前面 */
      z-index: 1;
      background-color: rgba(0, 0, 0, 0.4);
    }

    /* 鼠标经过card里面的back倾斜变大 */
    .card:hover .back {
      transform: skewY(15deg);
      width: 200px;
    }

    /* 鼠标经过card里面的back倾斜变大时，front会上移 */
    .card:hover .front {
      transform: translateY(-3px);
    }

    .card .back {
      background-color: purple;
      /* 添加倾斜效果 */
      transform: skewY(8deg);
    }
  </style>
</head>

<body>
  <div class="box">英雄联盟</div>




  <div class="card">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</body>

1.2.5 过渡进阶

注意：持续时间不能省略，其他都有默认值

1.2.6 变换函数的复合写法

html 复制代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 1000px;
      height: 100px;
      border: 1px solid red;

    }

    img {
      width: 100px;
      transition: all 2s;
    }

    /* 经过box时，里面的img的调整 */
    .box:hover img {
      /* 让轮胎移动并旋转 */
      /* 注意执行顺序 ，属性之间空格隔开 */
      transform: translateX(600px) rotate(360deg);
    }
  </style>
</head>

<body>
  <div class="box"><img src="../images/image.png" alt=""></div>
</body>

1.3 3D变换

1.3.1 3D变化之左手法则以及旋转rotateXYZ

【1】三维坐标系

【2】旋转

html 复制代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      width: 230px;
      /* 添加过渡效果 */
      transition: all 0.5s;
    }

    .catx:hover {
      transform: rotateX(180deg);
    }

    .caty:hover {
      transform: rotateY(180deg);
    }

    .catz:hover {
      transform: rotateZ(180deg);
    }
  </style>
</head>

<body>
  <img src="../images/cat1.jpg" alt="" class="catx">
  <br>
  <img src="../images/cat7.jpg" alt="" class="caty">
  <br>
  <img src="../images/cat11.jpeg" alt="" class="catz">
</body>

1.3.2 3D变化之透视perspective以及旋转方向

【1】场景

【2】语法

html 复制代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      display: block;
      margin: 0 auto;
      width: 230px;
      /* 添加过渡效果 */
      transition: all 0.5s;
      /* 给父亲添加透视效果 */
      /* perspective: 500px; */
    }

    /* 给子元素添加透视，但一定写在最前面 */
    .catx {
      transform: perspective(500px) rotateX(50deg);
    }

    .caty:hover {
      transform: perspective(400px) rotateY(180deg);
    }

    .catz {
      transform: rotateZ(30deg);
    }
  </style>
</head>

<body>
  <img src="../images/cat1.jpg" alt="" class="catx">
  <br>
  <img src="../images/cat7.jpg" alt="" class="caty">
  <br>
  <img src="../images/cat11.jpeg" alt="" class="catz">
</body>

1.3.3 3D变化之两面翻转的盒子效果

1.盒子旋转的角度

2.定位

3.谁转到后面，给谁添加backface-visibility:hidden

html 复制代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      /* 添加相对定位 */
      position: relative;
      width: 300px;
      height: 450px;
      border: 1px solid blue;
      margin: 100px auto;
      /* 想要添加立体效果，就用透视 */
      perspective: 1000px;
    }

    .box>div {
      /* 开始给两个盒子加相对定位 */
      /* 不要忘了子绝父相 */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: pink;
      text-align: center;
      line-height: 450px;
      font-size: 30px;
      color: #fff;
      transition: all .7s;
      /* 转到背面时，要隐藏起来 */
      backface-visibility: hidden;
    }

    .box .front {
      /* 前面的盒子要盖在后面的盒子上面 */
      z-index: 1;
    }

    .box .back {
      background-color: skyblue;
      /* 旋转角度 */
      transform: rotateY(180deg);
    }

    /* 鼠标经过的效果 */
    /* 经过盒子时的里面的front */
    .box:hover .front {
      transform: rotateY(-180deg);
    }

    /* 经过盒子时的里面的back，转回到前面 */
    .box:hover .back {
      transform: rotateY(0deg);
    }
  </style>
</head>

<body>
  <!-- 一个大盒子 -->
  <div class="box">
    <div class="front">前面</div>
    <div class="back">后面</div>
  </div>
</body>