css二维码加载动画

要创建一个CSS二维码加载动画，你可以使用CSS的伪元素和动画效果。以下是一个示例：

HTML代码：

<div class="qr-code"></div>

CSS代码：

.qr-code {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #fff;  border: 2px solid #000;
  overflow: hidden;
}

.qr-code::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background-image: url("path/to/qr-code.png");
  background-size: cover;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

在上面的代码中，我们首先创建了一个容器元素`.qr-code`，设置了宽度和高度，并添加了一些边框样式来模拟二维码的外观。然后，我们使用伪元素`::before`在容器中创建一个承载二维码图像的元素。我们通过设置背景图像和背景大小来显示二维码图像，并使用`translate`将其居中定位。最后，我们定义了一个名为"rotate"的动画，让二维码图像旋转起来。

你可以将上述代码中的`path/to/qr-code.png`替换为你自己的二维码图片路径，然后将代码复制到HTML文件中。打开文件，你就会看到一个带有旋转动画的二维码加载效果。你可以根据需要调整容器和二维码的样式。