[分享]css做的加载动画效果

CSS是前端开发者必备的技能，其中动画效果是网页设计中不可或缺的一部分。在加载时，一个有趣的、富有创意的动画能够吸引用户的注意力。接下来，我们将介绍如何使用CSS，利用其强大的动画功能，来实现一个加载...

CSS是前端开发者必备的技能，其中动画效果是网页设计中不可或缺的一部分。在加载时，一个有趣的、富有创意的动画能够吸引用户的注意力。接下来，我们将介绍如何使用CSS，利用其强大的动画功能，来实现一个加载效果。

//HTML结构
<div class="loading">
  <div class="loading-panel">
    <div class="loading-curve"></div>
    <div class="loading-text">Loading...</div>
  </div>
</div>

//CSS样式
.loading{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #fff;
}

.loading-panel{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}

.loading-curve{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto;
  border: 8px solid #ccc;
  border-top-color: #666;
  animation: spin 1s linear infinite;
}

.loading-text{
  margin-top: 20px;
  font-size: 24px;
  color: #666;
}

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

该效果使用了一个呈现圆形的插图，它旋转着，同时位于中央的文字显示“Loading...”。首先，CSS的position属性被用来让这个准备做动画的div元素定位到相应的位置。接下来，使用transform: translate来使这个div居中显示。然后是动画效果最重要的部分——旋转。通过对loading-curve这个元素应用animation属性，给它加上旋转的动画效果。当然，也可以根据需要来改变其属性，这样就能实现任何想要的效果了。对于文字部分，只需应用适当的颜色、字体大小等样式即可。