css实现视觉差异滚动效果代码-html代码-BFW代码库

css实现视觉差异滚动效果代码

代码语言：html

代码描述：css实现视觉差异滚动效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">

    <style>
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Playfair+Display:wght@700&display=swap');

:root {
        --scale: 0.1;
        --space: 8vmin;
        --font-primary: 'Lato', sans-serif;
        --font-heading: 'Playfair Display', serif;
    }

@media (prefers-reduced-motion) {
:root {
            --scale: 0;
        }
    }

        * {
            box-sizing: border-box;
        }

        body {
            color: hsl(0, 0%, 95%);
            background-color: hsl(5, 15%, 5%);
            font-size: clamp(1.2rem, 5vw, 1.5rem);
            font-family: var(--font-primary);
            line-height: 1.6;
        }

        a {
            color: hsl(65, 80%, 60%);
            text-decoration: none;
        }

        a:hover,
        a:focus {
            text-decoration: underline;
        }

        .page-title {
            text-align: center;
        }

        .page-title::after {
            content: '↓';
            display: block;
            font-size: 2em;
            opacity: 0;
            -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
            -webkit-animation: fadein 800ms 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            animation: fadein 800ms 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }

        .header,
        .footer {
            display: grid;
            place-items: center;
            height: 100vh;
        }

        .section {
            -webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transform: scaleY(calc(1 - var(--scale)));
            transform: scaleY(calc(1 - var(--scale)));
        }

        .section > * {
            -webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transform: scaleY(calc(1 + var(--scale)));
            transform: scaleY(calc(1 + var(--scale)));
        }

        .section-title {
            font-family: var(--font-heading);
            font-size: clamp(2.5rem, 6vw, 4.5rem);
            font-weight: bold;
            line-height: 1.125;
        }

        .byline {
            display: block;
            font-size: 0.6em;
            margin: calc(var(--space) /1.35) 0;
        }

        .content {
            position: relative;
            margin: -50vh auto 0;
            padding: var(--space);
            max-width: 55ch;
            width: calc(100% - var(--space));
            background: hsla(5, 15%, 5%, 0.9);
        }

        .content > * + * {
            margin-top: 2rem;
        }

        .image-container {
            positi.........完整代码请登录后点击上方下载按钮下载查看