幻灯片/轮播
纯CSS3响应式背景视觉差幻灯片插件
PetitQ
这是一款使用纯 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 代码请参考下载文件。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
