纯css3.0打造具有绚丽视差滚动的图片切换

用纯css实现这款banner切换，在摒弃了定时器效果下，加上滚动视差感堪称完美。
效果预览

先来剖析：
什么是视差滚动？
视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。
视差滚动的结构可以分成：背景层、内容层和悬浮层(贴图层)。悬浮层和背景层可为多层，能实现更为细腻的视差感，为了结构清晰，我们当前效果是各为一层。
了解了视差，新的问题迎面而来：
如何脱离js有效的去控制图片切换及背景动画？
在无任何js下能够传递状态的首先就能想到表单元素：，可以使用:checked选择器选择被选中的 元素。想清楚了这一点就开始动手搭建结构，毕竟很多时候思路比代码重要。
先放上完整结构代码：

        <div class="vie_main">            <input type="radio" name="i" class="page_1" id="p_1"  checked="checked"/>            <input type="radio" name="i" class="page_2" id="p_2" />            <input type="radio" name="i" class="page_3" id="p_3" />            <label for="p_1" class="btn_b1"></label>             <label for="p_2" class="btn_b2"></label>            <label for="p_3" class="btn_b3"></label>            <div class="vie_list">                <div class="vie_bg"></div>                <ul>                    <li>                        <img src="images/bn1.png" class="banner1"/>                        <img src="images/bn1-1.png" class="bn bnbg1"/>                    </li>                    <li>                        <img src="images/bn2.png" class="banner2"/>                        <img src="images/bn2-2.png" class="bn bnbg2"/>                    </li>                    <li>                        <img src="images/bn3.png" class="banner3" />                        <img src="images/bn3-3.png" class="bn bnbg3"/>                    </li>                </ul>            </div>        </div>

接下来继续分析控制按钮

            <input type="radio" name="i" class="page_1" id="p_1"  checked="checked"/>            <input type="radio" name="i" class="page_2" id="p_2" />            <input type="radio" name="i" class="page_3" id="p_3" />            <label for="p_1" class="btn_b1"></label>             <label for="p_2" class="btn_b2"></label>            <label for="p_3" class="btn_b3"></label>

label标签下的 for 属性命名和一个目标表单 id相同，这样利用显式形式绑定input标签，从而控制input。这一块完成后，控制滚动和背景通过css就能轻易实现了。
完整的Css布局样式

body,p,ul,li,ol,h1,h2,h3,h4,h5,h6,dl,dt,dd,form,iframe{margin:0;padding:0;}ul,li,ol{list-style:none outside none;}.vie_main{height: 650px; width: 100%;position: relative;}.vie_main input{display: none;}.vie_list{height: 100%; overflow: hidden;}.vie_bg{width:100%;height:100%;background:url(../images/bg.jpg) no-repeat center center; position: absolute; top: 0; left: 0;overflow: hidden;}.vie_list ul{position: relative; top: 0; height: 100%; -webkit-transition:top 1s ease-in;-moz-transition:top 1s ease-in;-ms-transition:top 1s ease-in;transition:top 1s ease-in;}.vie_list ul li{ height:100%;opacity: 0; text-align: center;position: relative;}.vie_list ul li>img{margin-top: -10px;}.vie_list ul li .bn{margin-top:0;opacity:1;position: absolute; top: 0; left: 50%; transform: translateX(-50%);}.vie_list ul li p{font-size: 40px;}.vie_main label{display:none;width: 60px; height: 60px;border-radius: 60px;background:#E0371E url(../images/up.png) no-repeat center center;position: absolute;z-index: 2;top: 34%; right: 20%;opacity: 0.3;cursor: pointer;}.vie_main label:hover{opacity: 0.6;}

通过这些css把布局调整好，值得注意的是我们使用position属性实现覆盖效果，不要忘记调整z-index调整堆叠顺序。
z-index值可以控制定位元素在垂直于显示屏方向（Z 轴）上的堆叠顺序，值大的元素发生重叠时会在值小的元素上面。

/*btn*/.page_1:checked ~ .btn_b2,.page_2:checked ~ .btn_b3{background-image: url(../images/down.png);display: block; top: 48%;}.page_2:checked ~ .btn_b1,.page_3:checked ~ .btn_b2{background-image: url(../images/up.png);display: block;}.page_1:checked ~ .vie_list ul li:first-child,.page_2:checked ~ .vie_list ul li:nth-child(2),.page_3:checked ~ .vie_list ul li:nth-child(3){opacity: 1;}/*滚动 top*/.page_1:checked ~ .vie_list ul{top:0;}.page_2:checked ~ .vie_list ul{top:-100%}.page_3:checked ~ .vie_list ul{top:-200%}/*banner切换过渡*/.page_1:checked ~ .vie_list ul .banner1,.page_2:checked ~ .vie_list ul .banner2,.page_3:checked ~ .vie_list ul .banner3{margin-top:82px;-webkit-transition: margin-top 1s linear 1s;-moz-transition: margin-top 1s linear 1s;-ms-transition: margin-top 1s linear 1s; transition: margin-top 1s linear 1s;}/*bg position*/.vie_main input:checked ~.vie_list .vie_bg{    -webkit-transition: background-position 1.5s linear;    -moz-transition: background-position 1.5s linear;    -ms-transition: background-position 1.5s linear;    transition:background-position 1.5s linear}.page_1:checked ~ .vie_list .vie_bg{background-position:center 0;}.page_2:checked ~ .vie_list .vie_bg{background-position:center -120px;}.page_3:checked ~ .vie_list .vie_bg{background-position:center -240px;}

这一块的元素选择都使用了css3.0里新增的选择器“~”
可以说“~”选择器才是我们整个效果实现的灵魂，能够精准有效的选择到非相邻的兄弟元素。有效的解决了css选择器不能灵活选择兄弟元素的尴尬。

各主流浏览器兼容，可以放心使用，在这里用“~”关联控制了图片切换和背景，再加上同样css3.0新增的transition属性做过渡动画即可完美实现图片切换以及背景缓动形成的视差效果。

本文纯属学习交流，部分图片来源网络，如有侵犯请及时与本人联系
火星时代教育 追追