常面常新-1021

CSS 中的动画元素

CSS 提供了多种方式来实现动画效果，使网页更加生动和互动。主要的动画元素包括 **CSS 过渡（Transitions）**和 CSS 动画（Animations）。以下是对这两种动画元素的详细解释和示例：

CSS 过渡（Transitions）

CSS 过渡允许你在指定的时间内平滑地改变 CSS 属性的值

使用方法：
- transition-property：指定要过渡的 CSS 属性。
- transition-duration：指定过渡效果的持续时间。
- transition-timing-function：指定过渡效果的速度曲线。
- transition-delay：指定过渡效果的延迟时间。
示例：
在这个示例中，当用户将鼠标悬停在.box元素上时，背景颜色会在0.5秒内平滑地从lightblue变为 lightcoral，并且元素会放大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>CSS Transitions</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        transition: background-color 0.5s ease, transform 0.5s ease;
      }
      .box:hover {
        background-color: lightcoral;
        transform: scale(1.2);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

CSS 动画（Animations）

CSS 动画允许你通过关键帧（keyframes）定义一系列的动画效果，并在指定的时间内逐帧播放这些效果。

使用方法
- @keyframes：定义动画的关键帧。
- animation-name：指定要应用的动画名称。
- animation-duration：指定动画的持续时间。
- animation-timing-function：指定动画的速度曲线。
- animation-delay：指定动画的延迟时间。
- animation-iteration-count：指定动画的播放次数。
- animation-direction：指定动画的播放方向。
示例在这个示例中，.box元素会在2秒内从左向右移动100像素，然后再回到原位，并且这个动画会无限次重复。

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>CSS Animations</title>
    <style>
      @keyframes slide {
        0% {
          transform: translateX(0);
        }
        50% {
          transform: translateX(100px);
        }
        100% {
          transform: translateX(0);
        }
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        animation: slide 2s infinite;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

BFC

**BFC（块级格式化上下文）**是一个独立的渲染区域，只有块级盒子参与，它规定了内部的块级盒子如何布局，并且与这个区域外部毫不相干。

触发 BFC 的条件

根元素（<html>）
浮动元素（float 不为 none）
绝对定位元素（position 为absolute或fixed）
行内块元素（display为inline-block）
表格单元格（display 为 table-cell）
表格标题（display 为 table-caption）
匿名表格单元格元素
overflow 属性不为visible的块元素
弹性盒子元素（display 为flex或inline-flex）

BFC 的特性

同一个 BFC 内的盒子会在垂直方向上一个接一个地排列。
同一个 BFC 内的盒子在垂直方向上的距离由 margin 决定。属于同一个 BFC 的两个相邻块级盒子的 margin 会发生重叠。
BFC 的区域不会与浮动盒子重叠。
计算 BFC 的高度时，浮动子元素也会参与计算。

CSS 塌陷

CSS塌陷通常指的是 margin 塌陷（Margin Collapse），即相邻的块级元素的垂直外边距（margin）会合并成一个 margin。

触发条件

相邻的块级元素
父子元素之间的margin
空的块级元素
解决方法

解决方法

使用BFC
使用padding或border分隔
使用overflow属性

防抖和节流

防抖（Debounce） 防抖是指在事件被触发后，等待一段时间再执行回调函数。如果在等待时间内事件再次被触发，则重新开始等待时间。
实现

function debounce(func, wait) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

节流（Throttle） 节流是指在一定时间内只允许回调函数执行一次，即使在这段时间内事件被多次触发。
实现

function throttle(func, wait) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= wait) {
      lastTime = now;
      func.apply(this, args);
    }
  };
}

常面常新-1021 ​

CSS 中的动画元素 ​

CSS 过渡（Transitions） ​

CSS 动画（Animations） ​

BFC ​

触发 BFC 的条件 ​

BFC 的特性 ​

CSS 塌陷 ​

触发条件 ​

解决方法 ​

防抖和节流 ​