css实现多个loading动画效果

在CSS中，可以使用不同的技术来创建多种加载动画。以下是一些常见的方法：

1. 使用CSS动画制作旋转图形：

.loading-spinner {
  width: 50px;
  height: 50px;
  background-color: #333;
  border-radius: 100%;
  margin: 50px;
  animation: spin 2s linear infinite;
}
 
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

2. 使用CSS动画制作渐变背景的加载动画：

.loading-bar {
  width: 100px;
  height: 15px;
  background: linear-gradient(to right, #4facfe 50%, #00f2fe 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  animation: load 1s ease infinite;
}
 
@keyframes load {
  0% {
    background-position: right bottom;
  }
  100% {
    background-position: left bottom;
  }
}

3. 使用CSS动画制作渐变颜色文字加载动画：

.loading-text {
  font-size: 20px;
  color: #333;
  animation: color-change 1s infinite alternate;
}
 
@keyframes color-change {
  0% {
    color: #333;
  }
  100% {
    color: #4facfe;
  }
}

这些示例展示了如何使用CSS动画创建简单的加载动画。你可以根据需要调整大小、颜色和其他属性来满足你的设计需求。