纯CSS3超酷全屏响应式幻灯片特效

这是一款效果非常炫酷的纯CSS3全屏幻灯片特效。该幻灯片特效的效果类似于全屏水平方向的单页滚动效果。该幻灯片效果使用纯CSS3制作，代码仅有100多行，非常的小巧。

制作方法

HTML结构

整个幻灯片使用一个div.wrap来作为包裹元素，每一个section.slide是一个页面。input.radio和<label>元素组成导航按钮。

<div class="wrap">
    <header>
        <label for="slide-1-trigger">Slide One</label>
        <label for="slide-2-trigger">Slide Two</label>
        <label for="slide-3-trigger">Slide Three</label>
        <label for="slide-4-trigger">Slide Four</label>
    </header>

    <input id="slide-1-trigger" type="radio" name="slides" checked>
    <section class="slide slide-one">
        <h1>Pure CSS Slider</h1>
    </section>
    <input id="slide-2-trigger" type="radio" name="slides">
    <section class="slide slide-two">
        <h1>Headline Two</h1>
    </section>
    <input id="slide-3-trigger" type="radio" name="slides">
    <section class="slide slide-three">
        <h1>Headline Three</h1>
    </section>
    <input id="slide-4-trigger" type="radio" name="slides">
    <section class="slide slide-four">
        <h1>Headline Four</h1>
    </section>
</div>               
              

CSS样式

该幻灯片的CSS样式十分简单。所有的幻灯片都设置为100%高度和宽度，使用绝对定位。开始的时候，所有的幻灯片的left属性都设置为100%，使它们不可见，只有在[id^="slide"]:checked的时候，就是相应的单选按钮被选中的时候，这个幻灯片才被移动会屏幕中。这里使用的是checkbox hack技术。

.wrap {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #120103;
  color: #fff;
  text-align: center;
}
.slide {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 10;
  padding: 8em 1em 0;
  background-color: #120103;
  background-position: 50% 50%;
  background-size: cover;
  -webkit-transition: left 0s .75s;
          transition: left 0s .75s;
}
[id^="slide"]:checked + .slide {
  left: 0;
  z-index: 100;
  -webkit-transition: left .65s ease-out;
          transition: left .65s ease-out;
}
[id^="slide"]:checked + .slide h1 {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all .5s .5s;
          transition: all .5s .5s;
}