css3主页加载动画

CSS3是目前最先进的CSS标准之一，其提供了许多新的功能和特性，其中之一就是可以实现炫酷的主页加载动画。如何使用CSS3实现主页加载动画呢？下面我们来一步步讲解。

html {
  height: 100%;
  background: #222222;
}

.loading {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.loading:before,.loading:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
  animation: round 2s infinite ease;
}

.loading:before {
  background: #fff;
  animation-delay: 0.4s;
}

.loading:after {
  background: #00b8ff;
  animation-delay: 0.8s;
}

@keyframes round {
  0% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(25px) translateY(0);
  }
  50% {
    transform: translateX(25px) translateY(25px);
  }
  75% {
    transform: translateX(0) translateY(25px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

首先，在HTML中定义一个网页背景色，并在CSS中定义一个圆形loading动画，该圆形动画由两个圆形构成，通过伪元素:before和:after，使用animation属性设置动画效果，可以定义动画的执行时间和循环次数。最后，在@keyframes中定义圆形动画的变换规则。

在需要使用loading动画的位置添加如下代码：

通过添加loading类，并将其放到页面任意需要的位置，即可显示CSS3的主页加载动画。