利用CSS3创建实用的加载动画效果两种

什么是CSS3动画？

CSS3动画是指基于CSS3的动态样式，使用CSS3可以创建各种酷炫、实用、自适应的动画效果，比如流光溢彩、旋转、缩放等。

CSS3加载动画效果的实现方式

利用CSS3实现加载动画效果，一般有两种方式：使用关键帧动画和使用过渡效果。

//使用关键帧动画
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loading {
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid #3498db;
  width: 20px;
  height: 20px;
  animation: loading 2s linear infinite;
}

//使用过渡效果
.loading {
  position: relative;
  width: 40px;
  height: 40px;
}
.loading:before, .loading:after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.loading:before {
  top: -5px;
  left: -5px;
  width: 50px;
  height: 50px;
  border: 5px solid transparent;
  border-top-color: #3498db;
  animation: spin 2s linear infinite;
}
.loading:after {
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 5px solid transparent;
  border-top-color: #f3f3f3;
  animation: spin 3s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

如何自适应不同尺寸屏幕？

为了使加载动画效果自适应不同尺寸的屏幕，需要使用百分比或rem单位来设置长度和宽度。

.loading {
  position: relative;
  width: 10%;
  height: 10%;
}
.loading:before, .loading:after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.loading:before {
  top: -5%;
  left: -5%;
  width: 60%;
  height: 60%;
  border: 5px solid transparent;
  border-top-color: #3498db;
  animation: spin 2s linear infinite;
}
.loading:after {
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  border: 5px solid transparent;
  border-top-color: #f3f3f3;
  animation: spin 3s linear infinite;
}

如何使加载动画效果更加有趣、有趣？

除了上面提到的基本动画效果，可以通过使用渐变、变形、透明度等属性，制作更加酷炫的效果。

.loading {
  position: relative;
  width: 40px;
  height: 40px;
  transform-origin: center center;
}
.loading:before, .loading:after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.loading:before {
  top: -.5em;
  left: -.5em;
  width: 10em;
  height: 10em;
  animation: pulse 2s ease-out infinite;
  background: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);
  opacity: .5;
  transform: scale(1);
  filter: blur(2.5em);
}
.loading:after {
  top: 0;
  left: 0;
  width: 2em;
  height: 2em;
  animation: spin 3s linear infinite;
  border: 2em solid transparent;
  border-top: 2em solid #58C0EF;
  opacity: .8;
  transform: rotate(0deg);
  filter: blur(1em);
}
@keyframes pulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}