master

分支 (1)

管理

管理

master

front_page_effect_collection
/
视觉滚动差

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }
        html, body {
            margin: 0;
            padding: 0;
        }

        html {
            overflow: hidden;
        }

        body {
            width: 100vw;
            height: 100vh;
            perspective: 100px;
            transform-style: preserve-3d;
            overflow-y: auto;
        }

        .main {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .list-item {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 60vh;
            overflow: hidden;
        }

        .list-item:hover .item-image::before {
            background-color: rgba(0, 0, 0, .2);
        }

        .item-image {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
            transform: translateZ(-50px) scale(2.4);
        }

        .item-image::before {
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .4);
            transition: all 0.3 ease;
        }

        .item-image img {
            display: block;
            width: 100%;
            height: 200%;
            object-fit: cover;
        }

        .item-text {
            color: aliceblue;
            font-family: 'Courier New', Courier, monospace;
            text-align: center;
        }

        .text-title {
            font-size: 2rem;
            font-weight: bolder;
            margin-bottom: 20px;
        }

        .text-desc {
            font-size: 1.2rem;
        }
    </style>
</head>

<body>
    <main class="main">
        <section class="list-item">
            <div class="item-image">
                <img src="https://cdn.pixabay.com/photo/2020/07/11/08/13/barley-5393123__340.jpg" alt="">
            </div>
            <div class="item-text">
                <div class="item-title">我讨厌这个世界的大部分，但总有一小部分留住我</div>
                <div class="item-desc">哪有什么选择恐惧症，还不是因为穷；哪有什么优柔寡断，还不是因为怂。</div>
            </div>
        </section>
        <section class="list-item">
            <div class="item-image">
                <img src="https://cdn.pixabay.com/photo/2020/06/24/20/41/truebsee-5337646__340.jpg" alt="">
            </div>
            <div class="item-text">
                <div class="item-title">退让带来的基本都是得寸进尺，别妄想能换来什么尊重和心疼。</div>
                <div class="item-desc">钱，就像内裤，你得有，但不必逢人就证明你有。干事业，就像怀孕，得够月，着急了就容易流产。你若成功了，放屁都有道理，你若失败了，再有道理都是放屁。</div>
            </div>
        </section>
        <section class="list-item">
            <div class="item-image">
                <img src="https://cdn.pixabay.com/photo/2020/06/14/22/46/the-caucasus-5299607__340.jpg" alt="">
            </div>
            <div class="item-text">
                <div class="item-title">你若成功了，吃青菜那叫养生；你若失败了，吃青菜则叫寒酸。</div>
                <div class="item-desc">当你们经历挣钱不易，情感挫折，事业蹉跎，生产之痛，离别之苦，你就会懂得：没有人会被命运额外眷顾，当你觉得容易的时候一定是有人在替你承担。</div>
            </div>
        </section>
        <section class="list-item">
            <div class="item-image">
                <img src="https://cdn.pixabay.com/photo/2020/07/23/01/55/sea-5430161__340.jpg" alt="">
            </div>
            <div class="item-text">
                <div class="item-title">来自南方温柔的风怎能承受北方刺骨的雪？</div>
                <div class="item-desc">如果你不够优秀，人脉是不值钱的，它不是追求来的，而是吸引来的。只有等价的交换，才能得到合理的帮助-虽然听起来很冷，但这是事实。</div>
            </div>
        </section>
        <section class="list-item">
            <div class="item-image">
                <img src="https://cdn.pixabay.com/photo/2020/07/12/16/40/paris-5397889__340.jpg"
                    alt="">
            </div>
            <div class="item-text">
                <div class="item-title">朵花刚开，别评价，让他长大，盛开</div>
                <div class="item-desc">当你越来越漂亮时,自然有人关注你。当你越来越有能力时,自然会有人看得起你。改变自己,你才有自信,梦想才会慢慢的实现。做最好的自己,懒可以毁掉一个人,勤可以激发一个人</div>
            </div>
        </section>
        <section class="list-item">
            <div class="item-image">
                <img src="https://cdn.pixabay.com/photo/2020/07/21/18/43/the-baltic-sea-5427114__340.jpg"
                    alt="">
            </div>
            <div class="item-text">
                <div class="item-title">面无表情的擦肩而过都是装的</div>
                <div class="item-desc">泰戈尔的“寂静在喧嚣里低头不语,沉默在黑夜里与目光结交,于是,我们看错了世界,却说世界欺骗了我们。”</div>
            </div>
        </section>
    </main>
</body>

</html>