[分享]css中弹出一个缓存圈

CSS中弹出一个缓存圈是网页设计中常用的一种效果，可以让用户知道网页在加载中，同时也增加了用户体验。下面是如何在CSS中实现这种效果。.loading { : fixed; top: 50; left...

CSS中弹出一个缓存圈是网页设计中常用的一种效果，可以让用户知道网页在加载中，同时也增加了用户体验。下面是如何在CSS中实现这种效果。

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

.loading:before,
.loading:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #333;
  animation: load 2s linear infinite;
  transform: translate(-50%, -50%);
}

.loading:before {
  animation-delay: 0s;
}

.loading:after {
  animation-delay: 1s;
}

@keyframes load {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }
  50% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
} 

代码中首先创建一个类名为loading的div，用于包含缓存圈。然后在这个div中，使用:before和:after伪元素分别创建两个圆，分别为圆圈的左右两侧。接着，使用动画animation来实现圆圈的缓存效果，以及固定定位position、居中显示transform等样式，最终实现了一个简单而优雅的弹出缓存圈的效果。