css网页加载动画的实现（至少三个）

CSS 网页加载动画可以通过以下几种常见的方式实现：

1. **关键帧动画** (Keyframe Animation): 使用 `@keyframes` 规则定义一系列的动画状态，然后给元素应用这个动画名称。例如：

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

div {
  animation: fadeIn 1s ease-in-out;
}

这段代码会让 div 元素从完全透明渐变为可见。

2. **过渡效果** (Transition Effect): 当元素的状态发生改变时，可以设置过渡效果让变化过程平滑进行。比如：

button {
  transition: background-color 0.5s ease;
}

button:hover {
  background-color: red;
}

当鼠标悬停在按钮上，背景色会逐渐变红。

3. **使用 SVG 图像** (SVG Animations): 可以直接在 CSS 中引用 SVG 动画，SVG 内部有内置的动画功能。如：

<svg>
  <rect id="myRect" width="100" height="100"/>
</svg>

<style>
#myRect {
  fill: none;
  stroke: blue;
  stroke-width: 10px;
  animation-name: pulse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
</style>

这会使矩形元素呈现出不断扩张和缩小的循环动画。