[分享]css3帧动画特效图片切换

CSS3是一种新型的样式表语言，它可以为我们带来很多的新特效和样式。其中，CSS3的帧动画特效是非常受欢迎的一种，可以实现非常流畅的动画效果。下面我们来看一下CSS3帧动画特效实现图片切换的案例。/ ...

CSS3是一种新型的样式表语言，它可以为我们带来很多的新特效和样式。其中，CSS3的帧动画特效是非常受欢迎的一种，可以实现非常流畅的动画效果。下面我们来看一下CSS3帧动画特效实现图片切换的案例。

/* CSS3帧动画特效实现图片切换 */
/* HTML部分 */
<div class="img-container">
   <img class="img1" src="1.jpg">
   <img class="img2" src="2.jpg">
   <img class="img3" src="3.jpg">
   <img class="img4" src="4.jpg">
</div>

/* CSS部分 */
.img-container{
   width: 500px;
   height: 300px;
   overflow: hidden;
   position: relative;
}
.img1, .img2, .img3, .img4{
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
   animation: img-anim 12s ease-in-out infinite;
}
.img1{
   opacity: 1;
}
@keyframes img-anim{
   0%, 33.33%{
      opacity: 1;
   }
   66.66%, 100%{
      opacity: 0;
   }
} 

首先，我们需要在HTML中创建一个div容器，名称为“img-container”，并在div内部添加4个img标签，分别设置class名称为“img1”、“img2”、“img3”、“img4”，并设置相应的图片地址。我们需要将div容器宽度和高度设置为图片大小相同，并且需要将overflow属性设置为hidden，防止图片溢出。

在CSS中，我们需要将4个img标签的position属性设置为absolute，top和left属性设置为0，这样就可以让图片堆叠在一起。同时，我们需要将4个img标签的opacity属性，即透明度设置为0，这样在刚开始图片就不会显示。

接下来，就是最重要的一步，我们需要使用CSS3的关键帧动画来实现图片的切换。我们给4个img标签添加相同的关键帧动画“img-anim”，，并给“img1”设置默认透明度为1。其中，每个关键帧的透明度设置根据不同的需求来进行调整，本案例中为每张图片显示4秒，隐藏8秒，总时长为12秒。

最后，通过CSS样式的设定，我们就可以实现了一张一张图片地在“img-container”容器中切换，实现了帧动画的特效。