一张png格式loading图标怎么动起来

原创于 2025-06-16 13:58:28 发布 · 352 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

虽然 PNG 是静态图片格式，但我们可以通过几种方法让它看起来像是在动。以下是几种实现方式：

方法一：使用 CSS 旋转动画

<template>
  <div class="loading-container">
    <img src="@/assets/loading.png" alt="Loading" class="rotating-image" />
  </div>
</template>

<script setup>
// 可以添加控制显示的逻辑
const isLoading = ref(true);
</script>

<style scoped>
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* 根据需要调整 */
}

.rotating-image {
  animation: spin 1.5s linear infinite;
  width: 50px; /* 根据你的图片尺寸调整 */
  height: 50px;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

方法二：添加脉动效果（缩放动画）

<style scoped>
.pulsing-image {
  animation: pulse 1.5s ease-in-out infinite;
  width: 50px;
  height: 50px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>

方法三：使用多个 PNG 帧创建动画

如果你有一系列 PNG 图片组成动画帧：

准备多张连续动作的 PNG 图片（如 loading-1.png, loading-2.png...）

使用 CSS 动画切换图片：

<template>
  <div class="frame-animation"></div>
</template>

<style scoped>
.frame-animation {
  width: 50px;
  height: 50px;
  background-image: url('@/assets/loading-1.png');
  animation: play 0.8s steps(4) infinite;
}

@keyframes play {
  100% {
    background-position: -200px; /* 4帧×50px */
  }
}
</style>