[分享]css3图片炫酷动画

CSS3是现代网页设计中必不可少的一部分，其中包括了各种各样的样式，包括动画。在这篇文章中，我们将会学习如何使用CSS3来创建一些炫酷的图片动画。/ 使用CSS3动画来使图片渐变变大 / img { ...

CSS3是现代网页设计中必不可少的一部分，其中包括了各种各样的样式，包括动画。在这篇文章中，我们将会学习如何使用CSS3来创建一些炫酷的图片动画。

/* 使用CSS3动画来使图片渐变变大 */
img {
  animation-name: imgtransition;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes imgtransition {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
} 

以上代码将使图片在网页中缓慢地变大，然后再慢慢地变回原始大小。动画运行时间为2秒，循环播放，动画缓动方式为ease-in-out。

/* 使用旋转动画使图片旋转360度 */
img {
  animation-name: imgrotate;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes imgrotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 

以上代码将使图片旋转360度，动画运行时间为2秒，循环播放，动画缓动方式为ease-in-out。

/* 使用keyframes和box-shadow来制作动感图像 */
img {
  animation-name: imgshadow;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes imgshadow {
  0% {
    box-shadow: 1px 1px 5px #fff, -1px -1px 5px #fff;
  }
  50% {
    box-shadow: -1px -1px 5px #fff, 1px 1px 5px #fff;
  }
  100% {
    box-shadow: 1px 1px 5px #fff, -1px -1px 5px #fff;
  }
} 

以上代码将在图片上设置一个闪烁的光晕效果，动画运行时间为2秒，循环播放，动画缓动方式为ease-in-out。

以上是只是一些CSS3图片动画的例子。利用CSS3可以实现无数种不同的动画效果，你只需要尝试不同的动画和CSS属性，并将它们结合起来，便能够创造出非常炫酷的效果。这篇文章中学到的技巧或许可以帮助你开始探索更多有关CSS3动画的可能性。