纯css3视觉差滚动幻灯片效果

这是利用光学原理制作的纯css3视觉差幻灯片效果。它利用几个不同的层在运动时交替变化不同的曲线、背景颜色和图片来形成视觉差效果。在这里，仅仅使用了css3，没有任何的javascript。

HTML

html结构有4个radio、4个labels和4个用于滚动的页面组成。每个页面都有自己的图片和描述文本。你可以自己添加更多的元素到每个页面中。这个视觉差效果的主要原理是：隐藏radio按钮，然后使用它们的label来为radio按钮设置“checked”状态。最后为当前选中的radio元素应用不同的css样式。

<div class="pss_main"> <!-- main parallax scrolling slider object -->
    <input id="r_1" type="radio" name="p" class="sel_page_1" checked="checked" /> <!-- hidden radios -->
    <input id="r_2" type="radio" name="p" class="sel_page_2" />
    <input id="r_3" type="radio" name="p" class="sel_page_3" />
    <input id="r_4" type="radio" name="p" class="sel_page_4" />

    <label for="r_1" class="pss_contr c1"></label> <!-- controls -->
    <label for="r_2" class="pss_contr c2"></label>
    <label for="r_3" class="pss_contr c3"></label>
    <label for="r_4" class="pss_contr c4"></label>

    <div class="pss_slides">
        <div class="pss_background"></div>
        <ul> <!-- slides -->
            <li><img src="images/image1.png" alt="image01" />
                <div>Model DT 770</div>
            </li>
            <li><img src="images/image2.png" alt="image02" />
                <div>Model DT 990</div>
            </li>
            <li><img src="images/image3.png" alt="image03" />
                <div>Model DT 234</div>
            </li>
            <li><img src="images/image4.png" alt="image04" />
                <div>Model DT 880</div>
            </li>
        </ul>
    </div>
</div>
                

更多详细信息请参看：http://www.script-tutorials.com/css3-parallax-scrolling-slider/