html中设置几张动画的图片

在HTML中，我们可以通过CSS的方式来设置图片的动画效果，下面我们来介绍如何设置几张动画的图片。

/* 定义动画关键帧，名称为shake */@keyframes shake {
  0% {
     transform: translateX(0);
 }
  25% {
     transform: translateX(-10px);
 }
  50% {
     transform: translateX(10px);
 }
  75% {
     transform: translateX(-10px);
 }
  100% {
     transform: translateX(0);
 }
}
/* 定义单张图片的样式 */img {
      /* 命名该张图片为shake动画 */  animation-name: shake;
      /* 动画持续时间为2秒 */  animation-duration: 2s;
      /* 动画循环次数为3次 */  animation-iteration-count: 3;
      /* 动画结束后恢复原样 */  animation-fill-mode: forwards;
}
/* 定义第二张图片的动画效果 */img:nth-child(2) {
      /* 旋转45度 */  transform: rotate(45deg);
      /* 动画持续时间为1秒 */  animation-duration: 1s;
      /* 动画循环次数为无限 */  animation-iteration-count: infinite;
      /* 线性变化 */  animation-timing-function: linear;
}
/* 定义第三张图片的动画效果 */img:nth-child(3) {
      /* 缩小 */  transform: scale(0.5);
      /* 动画持续时间为0.5秒 */  animation-duration: 0.5s;
      /* 动画循环次数为2次 */  animation-iteration-count: 2;
      /* 抖动 */  animation-timing-function: ease-in-out;
}
    

上述代码中，我们定义了三张图片的动画效果，分别为晃动、旋转和缩小，其中每张图片都有不同的动画持续时间、循环次数和加速度。

通过为图片添加各自对应的class或id，我们就可以轻松地实现图片的动画效果了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！