一、transform常用的几个值

1、位移：translate

水平位移：transform：translateX(100px);
垂直位移：transform:translateY(100px);

复合位移：transform：translate(100px,200px);

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta name='keywords' content='关键词'>
<meta name='description' content='描述的文字'>
<title>Document</title>
<style>
   *{
          margin:0;padding:0px;
    }
  .box{
      width:200px;
      height:200px;
      background:green;
      /* 水平移动500px */
      /* transform: translateX(500px); */
      /* 垂直移动500px */
      /* transform:translateY(500px); */
      /* 
        第一个值代表的是水平
        第二个值代表的是垂直
       */
      transform:translate(200px,300px);
      /* 
      如何让一个元素在屏幕中水平垂直居中第二种方法
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%); 
      */
  }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

2、scale 缩放

transform:scale(x,y),x代表的是缩放宽度的x倍，y代表的是缩放高度的y倍

transform:scale(n);代表的同时缩放宽度和高度的n倍

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta name='keywords' content='关键词'>
<meta name='description' content='描述的文字'>
<title>scale 缩放</title>
<style>
  *{
      margin:0;padding:0;
  }
  .box{
      width:200px;
      height:200px;
      background:green;
      /* 第一个值：代表的是缩放宽度的倍数 
         第二个值：代表的是缩放的高度的倍数
      */
      /* transform:scale(2,0.5); */
      /* 一个值的时候代表，宽和高同时缩放n倍 */
      transform:scale(0.5);
  }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

3、rotate:代表旋转多少度，可以是负值,单位是deg

transform:rotateX(45deg);代表的是围绕着x轴旋转45deg; （想象翻单杠的运动轨迹）
transform:rotateY(45deg)；代表的是围绕着y轴进行旋转45deg;(想象跳钢管舞)
transform:rotateZ(45deg);代表围绕着z轴进行旋转45deg；（大转盘，垂着转盘的轴）

4、skew:倾斜
transform：skewX（45deg）沿着X轴倾斜
transform：skewY（45deg）；沿着y轴倾斜
transform：skew（10deg，15deg），沿着x轴和y轴倾斜转换

5、transform-origin：x,y; 改变元素变形时候的作用原点。

水平方向：left、 center、 right；
垂直方向：top、center、bottom；

二、过渡 transition

transition

transition-property:height; —-过渡的属性

如果是多个属性可以用逗号隔开

transition-duration: 2s； —- 动画执行的时间;

可以对应属性分别设置，用逗号隔开

transition-timing-function: linear;—-运动曲线
transition-delay: 1s;——延迟
transition:all 2s linear 1s;——复合属性

http://web.chacuo.net/css3beziertool/

三、动画 animation

写动画要分两步：
1、定义动画
2、调用动画

需求：一打开页面有一个盒子从左边走到右边

/* 先写一个盒子基本样式 */
div {
      width: 100px;
      height: 100px;
      background-color: lavender;
    }

1、用keyframes定义动画

/* 其实keyframe就是慢慢改变样式的过程 */
    @keyframes 动画名 {

      /* 动画序列 */
      /* 0%是动画的开始 */
      0% {
        width: 100px;
      }

      /* 100%是动画的结束 */
      100% {
        width: 200px;
      }
    }

第二种写法

@keyframes 动画名 {

      /* from是动画的开始 */
      from{
        transform: translateX(0px);
      }

      /* to是动画的结束 */
           to{
      transform: translateX(400px);
      }
    }

2、使用动画

animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成

<!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>
    div {
      width: 100px;
      height: 100px;
      background-color: lavender;
      /* 2、调用动画 */
      /* 动画名称 */
      animation-name: run;
      /* 持续时间 ：盒子从左到右花费的时间*/
      animation-duration: 2s;
    }

    /* 其实keyframe就是慢慢改变样式的过程 */
    @keyframes run {

      /* 动画序列 */
      /* 0%是动画的 开始 */
      0% {
        transform: translateX(0px);
      }

      /* 100%是动画的结束 */
      100% {
        transform: translateX(400px);
      }
    }
  </style>
</head>

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

</html>

@keyframs的多种状态

<!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>
    div {
      width: 100px;
      height: 100px;
      background-color: lavender;
      /* 2、调用动画 */
      /* 动画名称 */
      animation-name: run;
      /* 持续时间 ：盒子从左到右花费的时间*/
      animation-duration: 2s;
    }

    /* 其实keyframe就是慢慢改变样式的过程 */
    @keyframes run {

      /* 动画序列 */
      /* 0%是动画的 开始 */


      /* 100%是动画的结束 */
      25% {
        transform: translate(400px, 0px);
      }

      50% {
        transform: translate(400px, 400px);
      }

      75% {
        transform: translate(0, 400px);
      }

      100% {
        transform: translate(0px, 0px);
      }
    }
  </style>
</head>

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

</html>

animation其他属性

<!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>
    div {
      width: 100px;
      height: 100px;
      background-color: lavender;
      /* 2、调用动画 */
      /* 动画名称 */
      animation-name: run;
      /* 持续时间 ：盒子从左到右花费的时间*/
      animation-duration: 2s;
      /* 运动曲线 默认ease*/
      animation-timing-function: ease;
      /* 动画延迟多久开始 默认是0s */
      animation-delay: 2s;
      /* 规定动画播放的次数  可以是数字 也可以是infinite */
      animation-iteration-count: infinite;
      /* 是否反方向播放 默认normal 反方向alternate*/
      animation-direction: alternate;
    }

    /* 其实keyframe就是慢慢改变样式的过程 */
    @keyframes run {

      /* 动画序列 */
      /* 0%是动画的 开始 */
      0% {
        transform: translateX(0px);
      }

      /* 100%是动画的结束 */
      100% {
        transform: translateX(400px);
      }
    }
  </style>
</head>

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

</html>

如果想动画走完后在原地不动可使用以下属性

/ 是否回到起始状态默认是backwards 在原地不回来了forwards /
animation-fill-mode: forwards;

<!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>
    div {
      width: 100px;
      height: 100px;
      background-color: lavender;
      /* 2、调用动画 */
      /* 动画名称 */
      animation-name: run;
      /* 持续时间 ：盒子从左到右花费的时间*/
      animation-duration: 2s;
      /* 运动曲线 默认ease*/
      animation-timing-function: ease;
      /* 动画延迟多久开始 默认是0s */
      animation-delay: 2s;
      /* 是否回到起始状态 默认是backwards  在原地不回来了forwards  */
      animation-fill-mode: forwards;
    }

    /* 其实keyframe就是慢慢改变样式的过程 */
    @keyframes run {

      /* 动画序列 */
      /* 0%是动画的 开始 */
      0% {
        transform: translateX(0px);
      }

      /* 100%是动画的结束 */
      100% {
        transform: translateX(400px);
      }
    }
  </style>
</head>

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

</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>
    div {
      width: 100px;
      height: 100px;
      background-color: lavender;
      /* 2、调用动画 */
      /* 动画名称 */
      animation-name: run;
      /* 持续时间 ：盒子从左到右花费的时间*/
      animation-duration: 2s;
      /* 运动曲线 默认ease*/
      animation-timing-function: ease;
      /* 动画延迟多久开始 默认是0s */
      animation-delay: 2s;
      /* 是否回到起始状态 默认是backwards  在原地不回来了forwards  */
      animation-fill-mode: forwards;
    }

    /* 其实keyframe就是慢慢改变样式的过程 */
    @keyframes run {

      /* 动画序列 */
      /* 0%是动画的 开始 */
      0% {
        transform: translateX(0px);
      }

      /* 100%是动画的结束 */
      100% {
        transform: translateX(400px);
      }
    }

    div:hover {
      /* 停止动画 */
      animation-play-state: paused;
    }
  </style>
</head>

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

</html>

运动曲线的几个值

四、过渡和动画的区别：

过渡：一般要借助伪类、js等去触发
动画：自动触发

过渡：一般执行一次
动画：可以通过属性控制执行次数

过渡：简单的动画效果
动画：复杂的动画效果

过渡使用于一种状态到另一种状态的改变

五、案例：

运动的小方块

<!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>
    .box1 {
      width: 600px;
      height: 400px;
      border: 2px solid lightcoral;
    }

    .box2 {
      width: 100px;
      height: 100px;
      background: lightpink;
      animation: run 2s linear infinite;
    }

    @keyframes run {
      25% {
        transform: translate(500px, 0);
        background-color: lightsalmon;
      }

      50% {
        transform: translate(500px, 300px);
        background-color: lightskyblue;
      }

      75% {
        transform: translate(0px, 300px);
        background-color: limegreen;
      }

      100% {
        transform: translate(0px, 0px);
        background-color: lemonchiffon;
      }
    }
  </style>
</head>

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

</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>
    div {
      width: 200px;
      height: 312px;
      background-image: url(./images/僵尸.png);
      animation: corpse 2s steps(9) infinite;
      margin-left: 1000px;
    }

    @keyframes corpse {
      from {
        background-position: 0 0;
      }

      to {
        background-position: -1800px 0;
      }
    }
  </style>
</head>

<body>
  <div>

  </div>
</body>

</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>
    div {
      width: 241px;
      height: 187px;
      background-image: url(./images/表情包.jpg);
      animation: smile 2s steps(4) infinite;
    }

    @keyframes smile {
      from {
        background-position: 0 0;
      }

      to {
        background-position: -964px 0;
      }
    }
  </style>
</head>

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

</html>

2022-03HTML CSS

day10