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

当前位置:主页 > jQuery库 > 视觉差滚动效果 > 纯css3视觉差滚动幻灯片效果
纯css3视觉差滚动幻灯片效果
分享:

    插件介绍

    这是一款效果很炫的纯css3视觉差幻灯片效果。在这个css3视觉差效果中,利用图片和曲线的位移来形成视觉差效果。

    浏览器兼容性

    浏览器兼容性
    时间:11-16
    阅读:

简要教程

这是利用光学原理制作的纯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/