html5怎么往图片上加动态

HTML5 提供了多种方法来给图片添加动态效果，以下是一些常用的技术介绍：

1、CSS3 动画

CSS3 动画是一种通过改变元素的属性值来实现动画效果的技术，我们可以使用 CSS3 动画来给图片添加动态效果，例如旋转、缩放、平移等。

我们需要在 HTML 文件中引入一个图片元素，并为其添加一个类名，my-image：

<img src="example.jpg" class="my-image">

接下来，我们可以在 CSS 文件中为这个类名添加动画样式，以下是一个示例，展示了如何实现图片的旋转动画：

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.my-image {
  animation: rotate 2s linear infinite;
}

在这个示例中，我们定义了一个名为 rotate 的关键帧动画，它会让图片从 0 度旋转到 360 度，我们将这个动画应用到 .my-image 类上，设置动画时长为 2 秒，线性速度曲线，无限循环。

2、JavaScript 动画

除了 CSS3 动画，我们还可以使用 JavaScript 来实现图片的动态效果，以下是一个使用 JavaScript 实现图片平移的示例：

我们需要在 HTML 文件中引入一个图片元素，并为其添加一个 ID，my-image：

<img id="my-image" src="example.jpg">

接下来，我们可以在 JavaScript 文件中编写代码来实现图片的平移效果，以下是一个示例：

const image = document.getElementById('my-image');
let position = 0;
const speed = 1;
function moveImage() {
  position += speed;
  if (position > window.innerWidth) {
    position = -image.width;
  } else if (position < -image.width) {
    position = window.innerWidth;
  }
  image.style.transform = translateX(${position}px);
  requestAnimationFrame(moveImage);
}
moveImage();

在这个示例中，我们首先获取了图片元素，并定义了一个变量 position 来存储图片的位置，我们定义了一个名为 moveImage 的函数，它会更新图片的位置，并将其应用到元素的 transform 属性上，我们调用 moveImage 函数来启动动画。

3、canvas API

canvas API 是 HTML5 提供的一种用于绘制图形的接口，我们可以使用 canvas API 来绘制动态的图片效果，以下是一个使用 canvas API 实现图片平移的示例：

我们需要在 HTML 文件中引入一个 canvas 元素，并为其添加一个 ID，my-canvas：

<canvas id="my-canvas" width="800" height="600"></canvas>

接下来，我们可以在 JavaScript 文件中编写代码来实现图片的平移效果，以下是一个示例：

const canvas = document.getElementById('my-canvas');
const context = canvas.getContext('2d');
const image = new Image();
image.src = 'example.jpg';
let position = 0;
const speed = 1;
image.onload = function () {
  context.drawImage(image, position, 0, image.width, image.height);
};
function moveImage() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  position += speed;
  if (position > canvas.width) {
    position = -image.width;
  } else if (position < -image.width) {
    position = canvas.width;
  }
  context.drawImage(image, position, 0, image.width, image.height);
  requestAnimationFrame(moveImage);
}
moveImage();

在这个示例中，我们首先获取了 canvas 元素和其上下文对象，我们创建了一个新的 Image 对象，并设置了其源文件为我们要使用的图片，接下来，我们定义了一个名为 moveImage 的函数，它会清除画布上的图像，更新图片的位置，并将其绘制到画布上，我们调用 moveImage 函数来启动动画。