CSS实现加载中动画|极客教程

CSS实现加载中动画

在网页开发中，加载中动画是一个常见的需求，它可以提升用户体验，让用户在等待页面加载时不感到无聊或焦虑。在本文中，我们将介绍如何使用CSS来实现各种不同风格的加载中动画。

1. 旋转动画

旋转动画是一种简单而常见的加载中动画效果，通过旋转一个元素来展示加载状态。下面是一个简单的旋转动画示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转动画</title>
<style>
.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

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

<h2>旋转动画</h2>

<div class="loader"></div>

</body>
</html>

Output:

CSS实现加载中动画

在上面的示例中，我们创建了一个带有旋转动画效果的圆形元素。当页面加载时，这个圆形元素会不断旋转，展示加载中的状态。

2. 跳动动画

跳动动画是一种生动有趣的加载中动画效果，通过元素的跳动来展示加载状态。下面是一个简单的跳动动画示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跳动动画</title>
<style>
.loader {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  animation: jump 1s infinite;
}

@keyframes jump {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}
</style>
</head>
<body>

<h2>跳动动画</h2>

<div class="loader"></div>

</body>
</html>

Output:

CSS实现加载中动画

在上面的示例中，我们创建了一个带有跳动动画效果的方形元素。当页面加载时，这个方形元素会不断跳动，展示加载中的状态。

3. 渐变动画

渐变动画是一种流畅而美观的加载中动画效果，通过元素的渐变来展示加载状态。下面是一个简单的渐变动画示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变动画</title>
<style>
.loader {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, #3498db, #f39c12, #e74c3c, #9b59b6);
  background-size: 400% 400%;
  animation: gradient 2s infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>
</head>
<body>

<h2>渐变动画</h2>

<div class="loader"></div>

</body>
</html>

Output:

CSS实现加载中动画

在上面的示例中，我们创建了一个带有渐变动画效果的正方形元素。当页面加载时，这个正方形元素会不断变换颜色，展示加载中的状态。

4. 缩放动画

缩放动画是一种简洁而炫酷的加载中动画效果，通过元素的缩放来展示加载状态。下面是一个简单的缩放动画示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>缩放动画</title>
<style>
.loader {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  animation: scale 1s infinite alternate;
}

@keyframes scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}
</style>
</head>
<body>

<h2>缩放动画</h2>

<div class="loader"></div>

</body>
</html>

Output:

CSS实现加载中动画

在上面的示例中，我们创建了一个带有缩放动画效果的方形元素。当页面加载时，这个方形元素会不断缩放，展示加载中的状态。

5. 弹跳动画

弹跳动画是一种有趣而生动的加载中动画效果，通过元素的弹跳来展示加载状态。下面是一个简单的弹跳动画示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹跳动画</title>
<style>
.loader {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
</style>
</head>
<body>

<h2>弹跳动画</h2>

<div class="loader"></div>

</body>
</html>

Output:

CSS实现加载中动画