css 设置图片加载动画效果

为了给网站增色，图片已成为网站设计中不可或缺的元素。不过，当图片加载过慢时，用户体验就会大打折扣。为了解决这个问题，我们可以在CSS中设置图片加载动画效果，让用户在等待图片加载的过程中也能享受到良好的用户体验。

/*首先，我们可以定义一个加载动画的CSS动画*/
@keyframes spinner {
  to {transform: rotate(360deg);}
}

/*接着，我们可以定义一个class来应用这个动画，这个class将被加到图片标签上*/
.loading {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: .25rem solid rgba(0,.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  animation: spinner .6s linear infinite;
}

/*最后，我们给img标签添加onload事件，当图片加载完成时，动态删除加载动画的class*/

上面的代码设置了一个圆形加载动画，它会不停地旋转，形成图片加载的效果。通过给图片添加一个onload事件，我们能够在图片加载完成后动态地删除加载动画的class，显示真正的图片。这样，用户在等待图片加载的过程中也能体验到一个良好的用户体验。