纯css3响应式背景视觉差幻灯片插件

这是一款非常酷的纯css3响应式背景视觉差幻灯片插件。插件中使用radio按钮和兄弟选择器来控制幻灯片的切换。插件中使用了两个backgrounds：背景和前景。通过改变背景的background position来使幻灯片产生背景视觉差效果。

HTML

通过兄弟选择器来连接radio按钮和class为sp-content的div。这需要将radio按钮和sp-content放在dom的同一层上。当点击radio按钮时，背景颜色和背景位置将改变。sp-parallax-bg是背景图片(那张世界地图)，sp-slider中放的是幻灯片图片。

<div class="sp-slideshow">
            
    <input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />
    <label for="button-1" class="button-label-1"></label>
    
    <input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />
    <label for="button-2" class="button-label-2"></label>
    
    <input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />
    <label for="button-3" class="button-label-3"></label>
    
    <input id="button-4" type="radio" name="radio-set" class="sp-selector-4" />
    <label for="button-4" class="button-label-4"></label>
    
    <input id="button-5" type="radio" name="radio-set" class="sp-selector-5" />
    <label for="button-5" class="button-label-5"></label>
    
    <label for="button-1" class="sp-arrow sp-a1"></label>
    <label for="button-2" class="sp-arrow sp-a2"></label>
    <label for="button-3" class="sp-arrow sp-a3"></label>
    <label for="button-4" class="sp-arrow sp-a4"></label>
    <label for="button-5" class="sp-arrow sp-a5"></label>
    
    <div class="sp-content">
        <div class="sp-parallax-bg"></div>
        <ul class="sp-slider clearfix">
            <li><img src="images/image1.png" alt="image01" /></li>
            <li><img src="images/image2.png" alt="image02" /></li>
            <li><img src="images/image3.png" alt="image03" /></li>
            <li><img src="images/image4.png" alt="image04" /></li>
            <li><img src="images/image5.png" alt="image05" /></li>
        </ul>
    </div><!-- sp-content -->
    
</div><!-- sp-slideshow -->

                

css代码请参考下载文件。