css3 简单预加载动画

CSS3是一种常用的Web技术，它可以通过动画来增加页面的交互性和吸引力。预加载动画是CSS3中的一种特殊动画效果，它可以在页面加载时呈现出加载中的状态，让页面看起来更加流畅。

/* CSS代码 */
.loading {
  position: fixed;
  z-index: 9999999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading::before {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 4px solid #3498db;
  border-top-color: transparent;
  animation: spin 1.5s linear infinite;
}

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

以上是一个简单的预加载动画的CSS3代码。在HTML中，我们只需要添加一个div标签，并将其类名设为“loading”即可：

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

此时，在页面加载时，会显示一个类似于旋转的圆形，使用这种简单的预加载动画可以增加页面的交互性，同时提高用户体验。