当前位置：极客教程 > CSS > CSS 问答 > CSS加载动画

CSS加载动画

CSS加载动画

在网页开发中，加载动画是一个非常常见的需求。通过加载动画，可以让用户在等待页面加载的过程中感到更加愉快和耐心。在本文中，我们将介绍一些常见的CSS加载动画效果，并提供相应的示例代码。

1. 旋转动画

旋转动画是一种简单而又常见的加载动画效果。通过CSS的@keyframes规则，我们可以实现一个简单的旋转加载动画。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotation Animation</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>Rotation Animation</h2>

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

</body>
</html>

Output:

CSS加载动画

在上面的示例代码中，我们创建了一个带有旋转动画效果的加载动画。当页面加载时，蓝色的圆圈会不断地旋转，形成一个加载动画效果。

2. 跳动动画

跳动动画是另一种常见的加载动画效果。通过CSS的@keyframes规则，我们可以实现一个简单的跳动加载动画。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bounce Animation</title>
<style>
.loader {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  border-radius: 50%;
  animation: bounce 2s infinite;
}

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

<h2>Bounce Animation</h2>

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

</body>
</html>

Output:

CSS加载动画

在上面的示例代码中，我们创建了一个带有跳动动画效果的加载动画。当页面加载时，蓝色的圆圈会不断地上下跳动，形成一个加载动画效果。

3. 渐变动画

渐变动画是一种比较炫酷的加载动画效果。通过CSS的@keyframes规则和linear-gradient属性，我们可以实现一个带有渐变效果的加载动画。

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

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

<h2>Gradient Animation</h2>

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

</body>
</html>

Output:

CSS加载动画

在上面的示例代码中，我们创建了一个带有渐变效果的加载动画。当页面加载时，背景色会不断地渐变，形成一个炫酷的加载动画效果。

4. 缩放动画

缩放动画是一种简单而又常见的加载动画效果。通过CSS的@keyframes规则，我们可以实现一个简单的缩放加载动画。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scale Animation</title>
<style>
.loader {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  border-radius: 50%;
  animation: scale 2s infinite alternate;
}

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

<h2>Scale Animation</h2>

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

</body>
</html>

Output:

CSS加载动画

在上面的示例代码中，我们创建了一个带有缩放效果的加载动画。当页面加载时，蓝色的圆圈会不断地缩放，形成一个加载动画效果。

5. 闪烁动画

闪烁动画是一种比较炫酷的加载动画效果。通过CSS的@keyframes规则，我们可以实现一个带有闪烁效果的加载动画。

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

@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>
</head>
<body>

<h2>Blink Animation</h2>

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

</body>
</html>

Output:

CSS加载动画

在上面的示例代码中，我们创建了一个带有闪烁效果的加载动画。当页面加载时，蓝色的圆圈会不断地闪烁，形成一个加载动画效果。

6. 翻转动画

翻转动画是一种比较炫酷的加载动画效果。通过CSS的@keyframes规则，我们可以实现一个带有翻转效果的加载动画。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flip Animation</title>
<style>
.loader {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  animation: flip 2s infinite;
}

@keyframes flip {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
</style>
</head>
<body>

<h2>Flip Animation</h2>

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

</body>
</html>

Output:

CSS加载动画

在上面的示例代码中，我们创建了一个带有翻转效果的加载动画。当页面加载时，蓝色的圆圈会不断地翻转，形成一个加载动画效果。

7. 弹跳动画

弹跳动画是一种比较有趣的加载动画效果。通过CSS的@keyframes规则，我们可以实现一个带有弹跳效果的加载动画。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bounce Animation</title>
<style>
.loader {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  border-radius: 50%;
  animation: bounce 2s infinite;
}

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

<h2>Bounce Animation</h2>

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

</body>
</html>

Output:

CSS加载动画

在上面的示例代码中，我们创建了一个带有弹跳效果的加载动画。当页面加载时，蓝色的圆圈会不断地上下弹跳，形成一个加载动画效果。

8. 旋转缩放动画

旋转缩放动画是一种比较炫酷的加载动画效果。通过CSS的@keyframes规则，我们可以实现一个带有旋转和缩放效果的加载动画。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate Scale Animation</title>
<style>
.loader {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  border-radius: 50%;
  animation: rotate-scale 2s infinite;
}

@keyframes rotate-scale {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.5);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
</style>
</head>
<body>

<h2>Rotate Scale Animation</h2>

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

</body>
</html>

Output:

CSS加载动画

在上面的示例代码中，我们创建了一个带有旋转和缩放效果的加载动画。当页面加载时，蓝色的圆圈会不断地旋转并缩放，形成一个加载动画效果。

9. 颜色变化动画

颜色变化动画是一种比较炫酷的加载动画效果。通过CSS的@keyframes规则和linear-gradient属性，我们可以实现一个带有颜色变化效果的加载动画。

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

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

<h2>Color Change Animation</h2>

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

</body>
</html>

Output:

CSS加载动画

在上面的示例代码中，我们创建了一个带有颜色变化效果的加载动画。当页面加载时，背景色会不断地变化，形成一个炫酷的加载动画效果。

10. 扭曲动画

扭曲动画是一种比较有趣的加载动画效果。通过CSS的@keyframes规则，我们可以实现一个带有扭曲效果的加载动画。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Distort Animation</title>
<style>
.loader {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  border-radius: 50%;
  animation: distort 2s infinite alternate;
}

@keyframes distort {
  0% {
    transform: skewX(0deg);
  }
  100% {
    transform: skewX(30deg);
  }
}
</style>
</head>
<body>

<h2>Distort Animation</h2>

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

</body>
</html>

Output:

CSS加载动画

在上面的示例代码中，我们创建了一个带有扭曲效果的加载动画。当页面加载时，蓝色的圆圈会不断地扭曲，形成一个加载动画效果。

通过以上示例代码，我们介绍了一些常见的CSS加载动画效果，包括旋转动画、跳动动画、渐变动画、缩放动画、闪烁动画、翻转动画、弹跳动画、旋转缩放动画、颜色变化动画和扭曲动画。这些加载动画效果可以帮助我们为网页添加一些动态和有趣的元素，提升用户体验。

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

CSS 精品教程