css3简单图片动画特效

CSS3是前端中常用的技术之一，它可以用来实现各种各样的动画效果。其中，图片动画特效也是常见的一种。下面，我们就来学习一下如何实现简单的CSS3图片动画特效。

/* 首先，指定图片的宽度和高度，使图片可以被正确地显示 */
img {
  width: 300px;
  height: 200px;
}

/* 接着，定义动画的具体效果 */
@keyframes move {
  0% {
    transform: translate(-100%,-100%);
  }
  100% {
    transform: translate(100%,100%);
  }
}

/* 最后，将动画应用到图片上 */
img {
  animation-name: move;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

上述代码实现了一种图片从左上角移动到右下角的效果。具体代码意思如下：

• 指定图片的宽度和高度为300px和200px;
• 定义了一个名为move的动画，从左上角移动到右下角；
• 将动画应用到图片上，并且设置动画持续时间为3秒。

这是一种简单的CSS3图片动画特效，通过改变代码中transform属性的值，还可以实现其他不同的图片特效，如旋转、缩放等。同时，通过更改animation-duration属性的值，也可以调整动画的持续时间。