全屏响应式html5+jquery幻灯片轮播特效,纯CSS3超酷全屏响应式幻灯片特效

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

制作方法

HTML结构

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

Slide One

Slide Two

Slide Three

Slide Four

Pure CSS Slider

Headline Two

Headline Three

Headline Four

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;

}