[分享]css中 图片动画效果代码大全

CSS 中的图片动画效果可以增加网站的视觉效果，提高用户体验。下面是一些常用的图片动画效果代码：/ 1. 图片淡入淡出 / img { opacity: 1; transition: opacity ...

CSS 中的图片动画效果可以增加网站的视觉效果，提高用户体验。下面是一些常用的图片动画效果代码：

/* 1. 图片淡入淡出 */
img {
  opacity: 1;
  transition: opacity .5s ease-in-out;
}
img:hover {
  opacity: .5;
}

/* 2. 图片缩放 */
img {
  transform: scale(1);
  transition: transform .5s ease-in-out;
}
img:hover {
  transform: scale(1.1);
}

/* 3. 图片旋转 */
img {
  transform: rotate(0deg);
  transition: transform .5s ease-in-out;
}
img:hover {
  transform: rotate(360deg);
}

/* 4. 图片平移 */
img {
  transform: translateX(0);
  transition: transform .5s ease-in-out;
}
img:hover {
  transform: translateX(50px);
}

/* 5. 图片斜切 */
img {
  transform: skew(0deg, 0deg);
  transition: transform .5s ease-in-out;
}
img:hover {
  transform: skew(20deg, 20deg);
}