css简单加载动效

**CSS 加载动效**

在网页设计中，加载动效是指当页面内容被加载时，显示出一些视觉效果来吸引用户的注意。这种技术可以提高用户体验，并且使得网站看起来更加现代化和高级。

在本文中，我们将介绍如何使用 CSS 来实现简单的加载动效。

**1. 简单的旋转动效**

我们先从最简单的旋转动效开始。下面是示例代码：

css.loader {
 position: absolute;
 top:50%;
 left:50%;
 transform: translate(-50%, -50%);
 width:100px;
 height:100px;
 border-radius:50%;
 background-color: #f0f0f0;
 animation: rotate2s linear infinite;
}

@keyframes rotate {
0% {
 transform: translate(-50%, -50%) rotate(0deg);
 }
100% {
 transform: translate(-50%, -50%) rotate(360deg);
 }
}

在上面的代码中，我们定义了一个`.loader`类，用于表示旋转动效的容器。我们使用 `position: absolute` 和 `top`、`left` 属性来将容器居中显示。

然后，我们定义了一个 `animation` 属性，指定动效的名称为 `rotate`，持续时间为2 秒，线性插值（即匀速），无限循环。

在 `@keyframes rotate` 中，我们定义了旋转动效的关键帧。第一个关键帧是初始状态，即旋转角度为0 度。第二个关键帧是结束状态，即旋转角度为360 度。

**2. 简单的闪烁动效**

下面是示例代码：

css.loader {
 position: absolute;
 top:50%;
 left:50%;
 transform: translate(-50%, -50%);
 width:100px;
 height:100px;
 border-radius:50%;
 background-color: #f0f0f0;
 animation: blink2s linear infinite;
}

@keyframes blink {
0% {
 opacity:1;
 }
50% {
 opacity:0.5;
 }
100% {
 opacity:1;
 }
}

在上面的代码中，我们定义了一个 `.loader` 类，用于表示闪烁动效的容器。我们使用 `position: absolute` 和 `top`、`left` 属性来将容器居中显示。

然后，我们定义了一个 `animation` 属性，指定动效的名称为 `blink`，持续时间为2 秒，线性插值（即匀速），无限循环。

在 `@keyframes blink` 中，我们定义了闪烁动效的关键帧。第一个关键帧是初始状态，即透明度为1。第二个关键帧是中间状态，即透明度为0.5。第三个关键帧是结束状态，即透明度为1。

**3. 简单的缩放动效**

下面是示例代码：

css.loader {
 position: absolute;
 top:50%;
 left:50%;
 transform: translate(-50%, -50%);
 width:100px;
 height:100px;
 border-radius:50%;
 background-color: #f0f0f0;
 animation: scale2s linear infinite;
}

@keyframes scale {
0% {
 transform: translate(-50%, -50%) scale(1);
 }
50% {
 transform: translate(-50%, -50%) scale(1.5);
 }
100% {
 transform: translate(-50%, -50%) scale(1);
 }
}

在上面的代码中，我们定义了一个 `.loader` 类，用于表示缩放动效的容器。我们使用 `position: absolute` 和 `top`、`left` 属性来将容器居中显示。

然后，我们定义了一个 `animation` 属性，指定动效的名称为 `scale`，持续时间为2 秒，线性插值（即匀速），无限循环。

在 `@keyframes scale` 中，我们定义了缩放动效的关键帧。第一个关键帧是初始状态，即容器大小为100x100 像素。第二个关键帧是中间状态，即容器大小为150x150 像素。第三个关键帧是结束状态，即容器大小为100x100 像素。

**总结**

在本文中，我们介绍了如何使用 CSS 来实现简单的加载动效，包括旋转、闪烁和缩放动效。这些动效可以提高用户体验，并使得网站看起来更加现代化和高级。