html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果

HTML实现图片加载动画效果，可以使用CSS中的animation属性，通过设定关键帧来实现。

以下是一个简单的示例代码：

<div class="loading">
  <img src="your-image.jpg" alt="your-image">
</div>

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.loading img {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

这里的关键帧spin定义了一个从0度到360度的旋转动画，在图片加载完成前会一直播放。

而HTML5和JavaScript实现图片加载进度动画效果，则需要监听图片的加载事件，获取当前加载进度，然后通过CSS或JavaScript来动态改变进度条。

以下是一个简单的示例代码：

<div class="loading-bar">
  <div class="bar"></div>
</div>
<img src="your-image.jpg" alt="your-image" id="img">

<script>
  const img = document.getElementById('img');
  const bar = document.querySelector('.bar');

  img.addEventListener('load', () => {
    bar.style.width = '100%';
  });

  img.addEventListener('progress', (event) => {
    const percent = Math.round((event.loaded / event.total) * 100);
    bar.style.width = `${percent}%`;
  });
</script>

<style>
  .loading-bar {
    width: 100%;
    height: 10px;
    background-color: #ddd;
  }

  .bar {
    width: 0%;
    height: 100%;
    background-color: #007bff;
    transition: width 0.5s ease;
  }
</style>

这里使用了HTML5的progress事件来获取图片加载进度，并通过CSS的transition属性来实现进度条的动画效果。