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

2019-10-09 10:17:53 作者: 大梦 浏览: 8 [百度未收录] [搜狗已收录] [360已收录]

简要教程

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

HTML

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="pss_main">
    <input id="r_1" type="radio" name="p" class="sel_page_1" checked="checked" />
    <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>
    <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>
            <li><img src="images/image1.png" alt="image01" />
                <div>Model DT 770div>
            li>
            <li><img src="images/image2.png" alt="image02" />
                <div>Model DT 990div>
            li>
            <li><img src="images/image3.png" alt="image03" />
                <div>Model DT 234div>
            li>
            <li><img src="images/image4.png" alt="image04" />
                <div>Model DT 880div>
            li>
        ul>
    div>
div>

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

版权免责声明 1、本网站名称:罗网轻量级sns社区,源码分享平台
2、本站永久网址:http://www.luopay.cn
3、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
4、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效  点此反馈 我们会第一时间更新。

下载地址
评论
本文作者 阅读排行 文章推荐

首页
最新
投稿
精选
我的