CSS3实现炫酷的切片式图片轮播效果

下面是“CSS3实现炫酷的切片式图片轮播效果”的完整攻略。

一、实现思路

• 利用CSS3的@keyframes创建动画关键帧。
• 使用transform属性实现图片翻转和平移。
• 利用position: absolute和z-index属性实现图片层叠和切片效果。
• 使用animation属性激活动画关键帧。

二、代码实现

以下是一个基础版的切片式图片轮播效果。

HTML代码

<div class="banner">
  <img src="image1.jpg" alt="图片1" class="show">
  <img src="image2.jpg" alt="图片2">
  <img src="image3.jpg" alt="图片3">
  <img src="image4.jpg" alt="图片4">
  <img src="image5.jpg" alt="图片5">
</div>

CSS代码

.banner {
  position: relative;
  width: 512px;
  height: 288px;
  margin: 50px auto;
  box-shadow: 0 0 10px #000;
  overflow: hidden;
}

.banner img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: rotateY(90deg) translateZ(-144px);
  transition: all 1s;
}

.banner .show {
  opacity: 1;
  transform: rotateY(0deg) translateZ(0);
}

.banner img:nth-child(odd) {
  transform-origin: left;
  animation: left 5s infinite ease-in-out alternate;
}

.banner img:nth-child(even) {
  transform-origin: right;
  animation: right 5s infinite ease-in-out alternate;
}

@keyframes left {
  0% {
    transform: rotateY(0deg) translateX(0) translateZ(0);
  }
  20% {
    transform: rotateY(90deg) translateX(0) translateZ(-144px);
  }
  50% {
    transform: rotateY(180deg) translateX(-256px) translateZ(-288px);
  }
  80% {
    transform: rotateY(270deg) translateX(0) translateZ(-144px);
  }
  100% {
    transform: rotateY(360deg) translateX(0) translateZ(0);
  }
}

@keyframes right {
  0% {
    transform: rotateY(0deg) translateX(0) translateZ(0);
  }
  20% {
    transform: rotateY(-90deg) translateX(0) translateZ(-144px);
  }
  50% {
    transform: rotateY(-180deg) translateX(256px) translateZ(-288px);
  }
  80% {
    transform: rotateY(-270deg) translateX(0) translateZ(-144px);
  }
  100% {
    transform: rotateY(-360deg) translateX(0) translateZ(0);
  }
}

解析

• position: relative：设置轮播容器为相对定位，为内部图片绝对定位做准备。
• width 和 height：设置轮播容器的尺寸。
• box-shadow：设置阴影效果，使轮播容器看起来更有立体感。
• overflow: hidden：为了把超出轮播容器的部分隐藏，可以看起来更加美观。
• position: absolute：设置所有的图片为绝对定位，方便后面的动画实现。
• opacity: 0 和 transform：通过变换属性设置所有图片翻转并平移，比如上面的代码将所有图片向后移动一个宽度的距离 translateX(-256px)，并且默认不显示，因此这些图片会被隐藏并旋转到相应的角度。
• .banner .show：为显示的图片添加样式，使其不再被翻转和平移，可以正常显示。
• transform-origin：设定图片一开始的翻转点。
• animation：为每个图片设置相同的动画，轮流播放不同的关键帧。

其中left和right为两个关键帧，描述了图片旋转的过程。可以看出，这里的条件是从开始到结束旋转360度，然后在20%、50%、80%的时候做出了左侧或右侧延伸的效果。具体的效果可以根据实际情况进行调整。

示例2

可以利用JavaScript或jQuery实现图片的自动轮播，例如下面的代码可以实现轮播间隔为2秒。

<div class="banner">
  <img src="image1.jpg" alt="图片1" class="show">
  <img src="image2.jpg" alt="图片2">
  <img src="image3.jpg" alt="图片3">
  <img src="image4.jpg" alt="图片4">
  <img src="image5.jpg" alt="图片5">
</div>

.banner {
  position: relative;
  width: 512px;
  height: 288px;
  margin: 50px auto;
  box-shadow: 0 0 10px #000;
  overflow: hidden;
}

.banner img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: rotateY(90deg) translateZ(-144px);
  transition: all 1s;
}

.banner .show {
  opacity: 1;
  transform: rotateY(0deg) translateZ(0);
}

.banner img:nth-child(odd) {
  transform-origin: left;
  animation: left 5s infinite ease-in-out alternate;
}

.banner img:nth-child(even) {
  transform-origin: right;
  animation: right 5s infinite ease-in-out alternate;
}

@keyframes left {
  0% {
    transform: rotateY(0deg) translateX(0) translateZ(0);
  }
  20% {
    transform: rotateY(90deg) translateX(0) translateZ(-144px);
  }
  50% {
    transform: rotateY(180deg) translateX(-256px) translateZ(-288px);
  }
  80% {
    transform: rotateY(270deg) translateX(0) translateZ(-144px);
  }
  100% {
    transform: rotateY(360deg) translateX(0) translateZ(0);
  }
}

@keyframes right {
  0% {
    transform: rotateY(0deg) translateX(0) translateZ(0);
  }
  20% {
    transform: rotateY(-90deg) translateX(0) translateZ(-144px);
  }
  50% {
    transform: rotateY(-180deg) translateX(256px) translateZ(-288px);
  }
  80% {
    transform: rotateY(-270deg) translateX(0) translateZ(-144px);
  }
  100% {
    transform: rotateY(-360deg) translateX(0) translateZ(0);
  }
}

$(document).ready(function () {
  setInterval(function () {
      $(".banner img.show").removeClass("show").next().addClass("show");
      if ($(".banner img.show").length === 0) {
          $(".banner img:first-child").addClass("show");
      }
  }, 2000);
});

解析

这段JavaScript代码使用了setInterval()方法，定时地执行一个函数。具体来说，它首先使用.removeClass()将当前显示图片的.show类移除，接着选择下一个图片添加.show，如果已经到了轮播的最后一张图片，还需要将第一张图片添加.show类，循环播放。

三、总结

切片式图片轮播效果通过CSS3的各种变换属性和动画，实现了浏览器端的图片切换效果，而且具有良好的可维护性和可扩展性，可以通过JavaScript实现自动轮播，这可以大大提高网站的用户体验。