CSS: 视差滚动页

具体效果粘贴代码运行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视差滚动页</title>
    <style>
        body,html{
            height: 100%;
            margin: 0;
            font-size: 16px;
            font-family: Arial, Helvetica, sans-serif;
            line-height: 1.8em;
            color: #666;
        }

        .pimg1, .pimg2, .pimg3, .pimg4{
            position: relative;
            opacity: .7;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            /* 视差效果的关键 */
            background-attachment: fixed; 
        }

        .pimg1{
            background-image: url('city.jpg');
            min-height: 100%;
        }

        .pimg2{
            background-image: url('city2.jpg');
            min-height: 400px;
        }

        .pimg3{
            background-image: url('city3.jpg');
            min-height: 400px;
        }

        .pimg4{
            background-image: url('city4.jpg');
            min-height: 100%;
        }
    
        .section{
            text-align: center;
            padding: 50px 80px;
        }

        .section-light{
            background: #f4f4f4;
            color: #666;
        }

        .section-dark{
            background: #282e34;
            color: #ddd;
        }

        .ptext{
            position: absolute;
            top: 50%;
            width: 100%;
            text-align: center;
            color: #ddd;
            font-size: 27px;
            font-weight: bold;
            letter-spacing: 8px;
            text-transform: uppercase;
        }

        .pimg1 .ptext .border,
        .pimg4 .ptext .border{
            background: #111;
            color: #fff;
            padding: 10px 20px;
        }

        @media(max-width: 500px) {
            .pimg1, .pimg2, .pimg3, .pimg4{
                background-attachment: scroll;
            }
        }

    </style>
</head>
<body>
    <div class="pimg1">
        <div class="ptext">
            <span class="border">
                生活
            </span>
        </div>
    </div>
    <section class="section section-light">
        <h2>酸甜苦辣</h2>
        <p>有些人其实你已经见过Ta最后一面了。</p>
    </section>

    <div class="pimg2">
        <div class="ptext">
            <span class="border">
                爱情
            </span>
        </div>
    </div>
    <section class="section section-dark">
        <h2>爱的尽头</h2>
        <p>我和你之间的距离渐行渐远，却心中仍然有你的位置。</p>
    </section>

    <div class="pimg3">
        <div class="ptext">
            <span class="border">
                亲情
            </span>
        </div>
    </div>
    <section class="section section-light">
        <h2>别与离</h2>
        <p>亲人是我活下去的唯一希望。</p>
    </section>


    <div class="pimg4">
        <div class="ptext">
            <span class="border">
                小时候的过年，将是我一辈子最珍贵的记忆.
            </span>
        </div>
    </div>

</body>
</html>

其中，主体骨架就是:

 <div class="pimg1">
        <div class="ptext">
            <span class="border">
                生活
            </span>
        </div>
    </div>
    <section class="section section-light">
        <h2>酸甜苦辣</h2>
        <p>有些人其实你已经见过Ta最后一面了。</p>
    </section>

所爱隔山海。

发布了268 篇原创文章 · 获赞 36 · 访问量 8万+

私信关注

猜你喜欢