浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery图片展示/幻灯片 2016-12-08

人气5728

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款效果非常炫酷的纯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;
}             
              

查看演示
下载资源:2
下载资源
错误提交:

格式:zip 大小:663.95KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2197.html 非特殊说明,本文版权归原作者所有,转载请注明出处
纯CSS3超酷全屏响应式幻灯片特效

我当前G币余额:0 已下载次数:2

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

评论功能关闭...(已有2 评论)