css上传图片加载动画移动端

CSS在移动端为上传图片添加加载动画可以通过使用`::before`或`::after`伪元素、`transition`和`background-image`属性来实现。以下是一个简单的示例：

input[type="file"] {
  width: 100%;
  height: 40px;
  border: none;
  background: #f0f0f0 url('loading_icon.svg') no-repeat center center; /* 加载动画的背景图片 */
  background-size: contain;
  cursor: pointer;
  position: relative;
}

input[type="file"]:hover,
input[type="file"]:focus {
  background-position: center;
  transition: background-position 0.3s ease-in-out;
}

input[type="file"]:focus::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

input[type="file"]:focus::before,
input[type="file"]:hover::before {
  background-color: rgba(0, 0, 0, 0.3);
}

在这个例子中：

- `input[type="file"]`选择器选中输入框，设置其样式，包括背景图片（加载图标）。
- `:hover`和`:focus`状态会让背景图移动到中心显示动画效果，`transition`让这种变化平滑过渡。
- `::before`伪元素用于覆盖整个输入框，当文件被聚焦时，它的不透明度逐渐增加，模拟加载过程。

记得替换`loading_icon.svg`为你的实际加载动画SVG文件路径。如果使用的是其他类型的动画（如CSS3动画或者GIF），你可以相应地调整背景属性。