.spinner-container {
  width: 100px;
  height: 100px;
  position: relative;
  margin: auto;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

在这个代码里，`@keyframes spin` 是用来做什么的？
user
`@keyframes spin` 定义了一个动画效果，使元素从 0 度旋转到 360 度，形成一个完整的圆周旋转。这个动画被应用到 `.spinner-container` 类上，通过 `animation` 属性设置，使得该容器会持续不断地以线性方式旋转，每 2 秒完成一次旋转。
assistant
在HTML中，我如何使用这个CSS类来创建一个旋转的加载动画？
user
要在 HTML 中使用这个 CSS 类来创建一个旋转的加载动画，你可以这样做：

1. 先在 HTML 文件中引入或定义这个 CSS 样式。
2. 在 HTML 中创建一个元素，并给它添加 `spinner-container` 类。

例如：

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转加载动画</title>
<style>
  .spinner-container {
    width: 100px;
    height: 100px;
    position: relative;
    margin: auto;
    animation: spin 2s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>
</head>
<body>

<div class="spinner-container">
  <!-- 可以在这里添加加载图标，例如一个圆形的 SVG 或者其他图像 -->
  <div style="width: 100%; height: 100%; background-color: #000; border-radius: 50%;"></div>
</div>

</body>
</html>
```

这个例子中，`.spinner-container` 包含一个圆形的子元素，子元素通过圆形背景和边框半径设置为 50%，形成一个圆形加载图标。旋转效果会应用到 `.spinner-container` 上，从而使里面的内容一起旋转。
assistant
如何让加载图标只在某个特定的条件下显示，比如在页面加载时显示？
user
你可以使用 JavaScript 来控制加载图标在特定条件下显示。例如，在页面加载时显示加载图标，页面加载完成后隐藏它。具体步骤如下：

1. 在 CSS 中设置加载图标初始状态为隐藏。
2. 在 JavaScript 中，页面加载时显示加载图标，页面加载完成后隐藏它。

以下是完整的示例代码：

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转加载动画</title>
<style>
  .spinner-container {
    width: 100px;
    height: 100px;
    position: relative;
    margin: auto;
    animation: spin 2s linear infinite;
    display: none; /* 初始状态为隐藏 */
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>
</head>
<body>

<div id="loader" class="spinner-container">
  <div style="width: 100%; height: 100%; background-color: #000; border-radius: 50%;"></div>
</div>

<script>
  // 页面加载时显示加载图标
  document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('loader').style.display = 'block';
  });

  // 页面加载完成后隐藏加载图标
  window.addEventListener('load', function() {
    document.getElementById('loader').style.display = 'none';
  });
</script>

</body>
</html>
```

在这个示例中：

1. `.spinner-container` 的 `display` 属性初始设置为 `none`，使加载图标在页面加载前是隐藏的。
2. 使用 `DOMContentLoaded` 事件来显示加载图标。当 HTML 文档完全加载和解析后，加载图标会显示出来。
3. 使用 `load` 事件来隐藏加载图标。当页面所有资源（包括图像、样式表、脚本等）完全加载完成后，加载图标会隐藏。

这样，加载图标只会在页面加载过程中显示，加载完成后自动隐藏。
assistant