幻灯片/轮播
纯CSS3超酷全屏响应式幻灯片特效
PetitQ
这是一款效果非常炫酷的纯 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;
}
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
