css做一个loading效果

今天我们来学习一下如何用CSS实现一个loading效果，让我们的页面更加生动有趣。

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.loading:before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #ccc;
  border-top-color: #668cff;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
} 

首先我们需要创建一个div，用来包裹我们的loading效果，设置宽高100%占据整个页面。接着我们使用flex布局使其内容垂直水平居中。然后通过:before伪元素创建一个圆形元素，宽高为50px，设置圆角50%使其变为圆形，边框为5px粗的灰色边框，并设置顶部边框颜色为蓝色，来模拟一个网球的形状。添加一个无限循环的动画使其旋转，使用transform:rotate来实现。

现在，我们只需要将此样式应用到需要显示loading效果的元素上即可。

<div class="loading"></div> 

这样，我们就成功地用CSS实现了一个简单的loading效果。当然，我们可以根据需要修改样式和动画，让它更加个性化或者更符合我们的网站主题。