纯CSS实现的加载loading动态特效

在Web开发中，加载动画是用户体验的重要组成部分之一。良好的加载动画不仅能提升网站的整体感受，还可以缓解用户等待数据加载时的焦虑感。本文将探讨如何仅使用CSS来创建各种类型的加载动画，并通过详细的代码示例帮助您快速上手。

基本概念与作用

加载动画通常用于向用户表明某些操作正在进行中，如页面加载、文件上传或数据处理等。CSS提供了强大的动画工具，包括关键帧动画(@keyframes)、变换(transforms)、过渡(transitions)等，使得我们能够在不依赖JavaScript的情况下创造出丰富多彩的动画效果。

示例一：旋转圆圈

旋转圆圈是最常见的加载动画形式之一，其简单且易于实现。

<div class="spinner"></div>

.spinner {
   
   
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  borderRadius: 50%;
  borderColor: #3498db rgba(0, 0, 0, 0.1);
  animation: spin 1s linear infinite;
}

/* 定义动画 */
@keyframes spin {
   
   
  to {
   
   
    transform: rotate(360deg);
  }
}

代码解释

这里使用了一个实心边框，并设置了一个透明部分来制造出旋转的效果。通过@keyframes定义动画规则，并通过animation属性应用到元素上。

示例二：波动波纹

另一种常见的加载动画是波动波纹效果，它给人一种水波荡漾的感觉。

.wave {
   
   
  position: relative;
  width: 40px;
  height: 40px;
  overflow: hidden;
}

.wave::before,
.wave::after {
   
   
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0