[分享]css写一个loading

在网站开发中，经常会出现需要加载等待的情况，为了让用户了解页面正在加载中，我们通常使用loading动画来表示页面正在加载中。今天我们来学习如何使用CSS写一个简单的loading动画。 .loadi...

在网站开发中，经常会出现需要加载等待的情况，为了让用户了解页面正在加载中，我们通常使用loading动画来表示页面正在加载中。今天我们来学习如何使用CSS写一个简单的loading动画。

 .loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 9999;
  
    .loading-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50px;
      height: 50px;
      margin-left: -25px;
      margin-top: -25px;
      border-radius: 50%;
      border: 3px solid #fff;
      border-top-color: #e74c3c;
      animation: rotate 1s ease-in-out infinite;
    }
    
    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  } 

首先，我们在HTML中创建一个元素来作为loading动画的容器，将其类名设置为“loading”。接下来，我们将其样式设置为定位到页面的顶部，并将其宽高设置为100%，以保证它可以覆盖整个页面。我们还将其z-index设置为9999，以确保它始终在页面的顶部。

然后，在loading容器中，我们创建一个新的元素，将其类名设置为“loading-icon”。这个元素将作为loading动画的图标。我们使用border来创建一个圆形边框，并将其宽度和高度设置为50px。我们将其水平和垂直居中，使用margin-left和margin-top属性来实现这一点。我们还使用border-top-color属性来实现旋转时的动态效果。

最后，我们使用@keyframes规则来定义动画。我们创建一个名为“rotate”的动画，将其持续时间设置为1秒，并将其缓动函数设置为“ease-in-out”，这将使其旋转更加平滑。该动画将无限循环，并在每个循环中将元素旋转360度。我们将其应用于loading-icon元素上，以创建一个旋转的loading动画。

现在，我们已经成功地使用CSS创建了一个简单的loading动画，并且可以在需要时用于网站开发中。希望这篇文章对你有所帮助！