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;
        }

        .sec.........完整代码请登录后点击上方下载按钮下载查看