JavaScript-HTML-CSS Day12 Notes

1、Z轴位置的方向

 

2、视距参数的理解

经验取值范围：800~1200 

注意：要添加给直接父级标签才有效，不能跨越 

看到这个perspective参数，条件反射几个字：近大远小。

 

3、空间-旋转，左手法则的理解记忆

 

4、rotate3d的用法，了解即可。实际工作中用的很少

 5、立体呈现效果：transform-style

 

 

6、动画效果，参数的设置

这是animation复合属性的写法：

 

 

这是animation拆分属性的写法：

 

7、如下动画效果的代码中，如何理解background-position: 参数的含义

  <style>
    div {
      width: 140px;
      height: 140px;
      border: 1px solid #000;
      background-image: url(./images/bg.png);
      animation: run 1s steps(12) infinite;
    }

    @keyframes run {
      from {
        background-position: 0 0;
      }
      to {
        background-position: -1680px 0;
      }
    }
  </style> 

在这个例子中，background-position 的参数用于定义背景图片在元素中的显示位置。具体来说：

• background-position: 0 0; 表示背景图片的左上角（0, 0）对齐到元素的左上角。
• background-position: -1680px 0; 表示背景图片向左移动 1680 像素，但垂直方向保持不变（0 表示没有垂直移动）。

解释取值的逻辑：

• 图片宽度：从代码中可以推测，背景图片 bg.png 是一个水平排列的精灵图（sprite sheet），包含了 12 帧的动画。
• 图片的总宽度：由 background-position: -1680px 0;

  在这个例子中，background-position 的参数用于定义背景图片在元素中的显示位置。具体来说：

  • background-position: 0 0; 表示背景图片的左上角（0, 0）对齐到元素的左上角。
  • background-position: -1680px 0; 表示背景图片向左移动 1680 像素，但垂直方向保持不变（0 表示没有垂直移动）。

  解释取值的逻辑：

  • 图片宽度：从代码中可以推测，背景图片 bg.png 是一个水平排列的精灵图（sprite sheet），包含了 12 帧的动画。
  • 图片的总宽度：由 background-position: -1680px 0; 可以推算出背景图片的总宽度应该是 1680 像素。
  • 帧数和每帧宽度：你使用了 steps(12)，这意味着动画被分成 12 步，每一步会显示图片的一个部分。背景图片的总宽度是 1680 像素，除以 12 步，得出每一帧的宽度为 1680px / 12 = 140px。

  因此，在动画中，background-position 会逐帧地向左移动 140 像素，直到完成所有 12 帧时达到 -1680 像素。

  动画效果：

  • 动画通过 @keyframes run 来控制背景图片的移动位置，从 0 0 开始，最终移动到 -1680px 0，也就是移过 12 帧的宽度。
  • 使用 steps(12) 来确保背景图片的移动是逐帧跳动，而不是平滑移动，以产生帧动画的效果。

  每次动画播放，背景图片会不断循环向左移动 140 像素，展示不同的部分，直到完成所有帧并循环播放。

  可以推算出背景图片的总宽度应该是 1680 像素。
• 帧数和每帧宽度：你使用了 steps(12)，这意味着动画被分成 12 步，每一步会显示图片的一个部分。背景图片的总宽度是 1680 像素，除以 12 步，得出每一帧的宽度为 1680px / 12 = 140px。

因此，在动画中，background-position 会逐帧地向左移动 140 像素，直到完成所有 12 帧时达到 -1680 像素。

动画效果：

• 动画通过 @keyframes run 来控制背景图片的移动位置，从 0 0 开始，最终移动到 -1680px 0，也就是移过 12 帧的宽度。
• 使用 steps(12) 来确保背景图片的移动是逐帧跳动，而不是平滑移动，以产生帧动画的效果。

每次动画播放，背景图片会不断循环向左移动 140 像素，展示不同的部分，直到完成所有帧并循环播放。