css3 规则图形 加载效果

CSS3规则可以用来创造各种各样的图形，包括加载效果，让网页展示更加生动。

/* 加载效果的CSS样式 */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading span {
  display: inline-block;
  margin: 0 4px;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: #333;
  animation: loading 1s linear infinite;
}

@keyframes loading {
  0% {
    transform: scale(0.6);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(0.6);
    opacity: 0.3;
  }
}

以上代码实现的加载效果是一组圆点在不断变换大小和透明度，并且不停地重复。使用上述代码为页面中的某个元素添加.loading类即可实现该效果。