[分享]css中幻灯片播放

CSS中幻灯片播放效果通常用于网站的各种轮播图、广告横幅等，给网站增添了不少视觉效果。在CSS中实现幻灯片播放效果通常需要掌握以下几种技巧：/ CSS中实现幻灯片播放效果的基本模板 / .slide ...

CSS中幻灯片播放效果通常用于网站的各种轮播图、广告横幅等，给网站增添了不少视觉效果。在CSS中实现幻灯片播放效果通常需要掌握以下几种技巧：

/* CSS中实现幻灯片播放效果的基本模板 */
.slide {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slide-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all .5s ease-out;
}

.slide-item.active {
  opacity: 1;
} 

以上代码是CSS中使用绝对定位和opacity属性实现幻灯片播放效果的基本模板。其中，slide表示幻灯片容器，slide-item表示每张幻灯片单元，通过active类来实现幻灯片的动态切换。需要注意的是，幻灯片容器必须设置overflow:hidden属性，否则幻灯片单元会溢出容器。

除了以上基本模板外，还可以通过CSS3新增的动画效果来实现更加绚丽的幻灯片播放效果。以下代码演示了如何使用CSS3的@keyframes和animation属性实现一种水平滑动的幻灯片播放效果：

/* 使用CSS3动画实现水平滑动幻灯片 */
.slide {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slide-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: slideInRight .5s ease-out forwards;
}

.slide-item.active {
  opacity: 1;
  animation: slideOutLeft .5s ease-out forwards;
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-100%); }
} 

以上代码使用了CSS3的@keyframes和animation属性来实现水平滑动的幻灯片播放效果。其中，slideInRight动画将幻灯片单元从右向左平移，slideOutLeft动画将幻灯片单元从左向右平移。需要注意的是，动画属性的forwards值表示动画结束后保持最后状态，否则会回到起始状态。