css中怎样让图片动

在网页设计中，让图片动起来可以增加页面的趣味性和吸引力。其中，通过CSS实现图片动态效果的方法比较简单和有效。

以下是一些常用的方法：

/* 1. 通过transition属性实现图片的平滑过渡效果 */
img{
  transition: all 0.5s;
}
img:hover{
  transform: rotate(360deg);
}

/* 2. 通过animation属性实现图片的动画效果 */
@keyframes myanimation{
  0%{transform: rotate(0deg);}
  50%{transform: rotate(180deg);}
  100%{transform: rotate(360deg);}
}

img{
  animation: myanimation 2s ease-in-out;
  animation-iteration-count: infinite;
}

/* 3. 通过transform属性组合实现更复杂的动态效果 */
img{
  transition: all 0.5s;
  transform: scale(1);
}
img:hover{
  transform: scale(1.5) rotate(360deg);
} 

这些方法可以让网页设计更灵动和生动，吸引访问者的视线，提升用户体验。