css加载动画1到100

您好！感谢您的提问。可以使用CSS中的@keyframes和animation来实现加载动画1到100。以下是一个简单的示例：

HTML代码：

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

CSS代码：

.loading {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid #ccc;
  border-top-color: #f00;
  animation: loading 2s linear infinite;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
    border-top-color: #f00;
  }
  25% {
    transform: rotate(90deg);
    border-top-color: #0f0;
  }
  50% {
    transform: rotate(180deg);
    border-top-color: #00f;
  }
  75% {
    transform: rotate(270deg);
    border-top-color: #f0f;
  }
  100% {
    transform: rotate(360deg);
    border-top-color: #f00;
  }
}

这个示例中的.loading元素是一个圆形容器，通过border属性设置了边框，然后使用@keyframes和animation实现了一个旋转的加载动画。在@keyframes中，通过设置不同的transform和border-top-color属性值来实现从1到100的加载动画效果。