响应式日落效果-html代码-BFW代码库

代码语言：html

所属分类：响应式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        body {
            margin: 0;
        }

        .image {
            transition: fill 3s ease-in-out;
            height: 100vh;
            display: grid;
            grid-template-columns: 1fr 80vh 1fr;
            grid-template-rows: 72vh 1fr;
            background-color: var(--trees);
        }

        [class*="section_"] {
            grid-column: 1 / -1;
            grid-row: 1;
            height: 100%;
            width: 100%;
        }

        svg {
            width: 100%;
            height: 100%;
        }

        .section_sky {
            grid-column: 1 / -1;
            grid-row: 1;
        }

        .section_rl, .section_ml, .section_fl {
            grid-column: 1;
            grid-row: 1;
        }

        .section_rm, .section_mm, .section_fm {
            grid-column: 2;
            grid-row: 1;
        }

        .section_rr, .section_mr, .section_fr {
            grid-column: 3;
            grid-row: 1;
        }

        [class*="section_f"], .section_trees {
            isolation: isolate;
        }

        .section_mfog {
            height: 30%;
            margin-top: 30vh;
        }

        .section_ffog {
            height: 30%;
            margin-top: auto;
        }

        .section_sun {
            height: 16vh;
            width: 16vh;
            margin: 4vh auto 0;
        }

        .gradient stop {
            transition: stop-color3sease-in-out;
        }

        .image-light {
            --rear_highlight: #ff8080;
            --rear_shadow: #c26d80;
            --mid_highlight: #ff6666;
            --mid_shadow: #824b6c;
            --fore_highlight: #ff4d4d;
            --fore_shadow: #623851;
            --trees: #412536;
            --sky-bottom: #FFAD66;
            --sky-mid: #ff8080;
            --sky-top: #412536;
            --fog: #ffff66;
            --sun: #ff4f23;
        }

        .image-dark {
            --rear_highlight: #a5cfe6;
            --rear_shadow: #7095af;
            --mid_highlight: #88d1fb;
            --mid_shadow: #4B6C82;
            --fore_highlight: #87d5f7;
            --fore_shadow: #385162;
            --trees: #253641;
            --sky-bottom: #a1cde4;
            --sky-mid: #7eb9d8;
            --sky-top: #051f33;
            --fog: #c9dfff;
            --sun: #6daac2;
        }

        .image-light .moon {
            opacity: 0;
        }

        .image-dark .moon {
            opacity: .22;
        }

        .screen {
            mix-blend-mode: screen;
        }

        .fog {
            fill: url(#gradient-fog);
            opacity: .22;
        }

        .moon {
            isolation: isolate;
            opacity: 0.22;
            mix-blend-mode: multiply;
            transition: opacity 3s ease-in-out;
        }

        .moon-grey1 {
            fill: #757575;
        }

        .moon-grey2 {
            fill: #595959;
        }

        .moon-grey3 {
            fill: #b2b2b2;
        }

        .moon-grey4 {
            fill: #ddd;
        }

        path, polygon {
            transition: fill 3s ease-in-out;
        }

        .image {
            transition: background-color 3s ease-in-out;
        }

        .switch {
            display: flex;
            align-items: center;
            position: absolute;
            bottom: 1rem;
            right: 1rem;
            border: 0;
            background: transparent;
            cursor: pointer;
        }

        .switch span {
            filter: saturate(0);
            background-color: transparent;
            opacity: .5;
            padding: .25rem;
            border-bottom-style: solid;
            border-bottom-width: 2px;
            transition: border-bottom-color 3s ease-in-out, filter 3s ease-in-out, opacity 3s ease-in-out;
        }

        .switch span:first-child {
            margin-right: 1rem;
        }

        [aria-checked="false"] span:first-child {
            filter: none;
            opacity: 1;
            border-color: white;
        }

        [aria-checked="true"] span:last-child {
            filter: none;
            opacity: 1;
            border-color: white;
        }
    </style>

</head>
<body>
    <div class="image image-dark">
        <svg class="section_sky" preserveAspectRatio="none">
            <defs>
                <linearGradient class="gradient" id="gradient-sky" gradientTransform="rotate(90)">
                    <stop offset="0%" stop-color="var(--sky-top)" />
                    <stop offset="40%" stop-color="var(--sky-mid)" />
                    <stop offset="100%" stop-color="var(--sky-bottom)" />
                </linearGradient>
                <linearGradient class="gradient" id="gradient-fog" gradientTransform="rotate(90)">
                    <stop offset="5%" stop-color="#000000" />
                    <stop offset="90%" stop-color="var(--fog)" />
                </linearGradient>
                <linearGradient class="gradient" id="gradient-sun" gradientTransform="rotate(90)">
                    <stop offset="5%" stop-color="#000000" />
                    <stop offset="90%" stop-color="var(--sun)" />
                </linearGradient>
            </defs>
            <rect height="100%" width="100%" fill="url(#gradient-sky)" />
        </svg>
        <svg class="section_sun screen" viewBox="0 0 27 27">
            <circle id="sun" class="screen" fill="url(#gradient-sun)" cx="50%" cy="50%" r="13" />
            <g class="moon">
                <polygon class="moon-grey1" points="15.37 23.8 15.37 23.8 15.37 23.8 15.37 23.8" />
                <path class="moon-grey1" d="M15.22,23.81s0,.06-.06.11h0s0,0,.2-.11h0Z" />
                <path class="moon-grey1" d="M19.05,14.34a2.34,2.34,0,0,1,.1.4A.9.9,0,0,0,19.05,14.34Z" />
                <path class="moon-grey1" d="M9.81,3.24h0a2.65,2.65,0,0,1-.33.24l-.14.19c-.23.34-.47.66-.68.94v0a.58.58,0,0,1,.43.13c-.07-.06-.1-.12.11.08l0-.1,0,.1c2.25-.75,1.38.3,1.57,1a1.47,1..........完整代码请登录后点击上方下载按钮下载查看