这是利用光学原理制作的纯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/
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!