当前位置：首页 > CSS

纯css3制作css

2026-03-11 18:24:22CSS

使用纯CSS3制作加载动画

CSS3提供了丰富的动画特性，可以通过@keyframes和animation属性创建流畅的加载动画。以下是一个简单的旋转加载动画示例：

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

创建进度条加载动画

进度条加载动画可以通过改变元素的宽度来实现：

.progress-bar {
  height: 20px;
  background-color: #e0e0e0;
  width: 100%;
}

.progress {
  height: 100%;
  width: 0%;
  background-color: #4CAF50;
  animation: progress 2s ease-in-out infinite;
}

@keyframes progress {
  0% { width: 0%; }
  50% { width: 50%; }
  100% { width: 100%; }
}

实现点状加载动画

点状加载动画可以通过多个元素的延迟动画实现：

.dot-loader {
  display: flex;
  justify-content: center;
}

.dot {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #333;
  border-radius: 50%;
  animation: bounce 1.5s infinite ease-in-out;
}

.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

制作波浪加载效果

波浪效果可以通过伪元素和变形动画实现：

.wave-loader {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
}

.wave-loader::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #2196F3, transparent);
  animation: wave 1.5s linear infinite;
}

@keyframes wave {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

创建脉冲加载效果

脉冲效果可以通过缩放动画实现：

纯css3制作css

.pulse-loader {
  width: 50px;
  height: 50px;
  background-color: #FF5722;
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% { transform: scale(0.8); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.7; }
}

这些CSS3动画技术可以单独使用，也可以组合使用来创建更复杂的加载效果。通过调整动画持续时间、延迟时间和缓动函数，可以创建各种视觉上吸引人的加载动画。

标签: css