css实现地铁运营地图动画代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现地铁运营地图动画代码，可修改参数

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

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    
credit {
    display: block;
    position: fixed;
    z-index: 1000;
    top: 2.6rem;
    left: 50%;
    transform: translateX(-50%);
    font: 500 1.5rem/1 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: .06rem;
    color: #7e7e84;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 .1rem .3rem #000000a6;

    span {
        margin: 0 .5rem;
        opacity: .55;
    }

    a {
        color: #cfcfc9;
        pointer-events: auto;
        text-decoration-color: #ffffff3d;
        text-underline-offset: .35rem;
        transition: color .2s, text-decoration-color .2s;

        &:is(:hover, :focus-visible) {
            color: var(--led);
            text-decoration-color: var(--led);
        }

        &:focus-visible {
            outline: .2rem solid #fff;
            outline-offset: .3rem;
            border-radius: .2rem;
        }
    }

    @media (max-width: 760px) {
        font-size: 1.3rem;
        top: 1.8rem;
    }
}

@keyframes hues {
    to {
        filter: hue-rotate(360deg);
    }
}

@keyframes chase {
    0% {
        opacity: calc(1 * var(--vis));
    }

    14% {
        opacity: calc(.16 * var(--vis));
    }

    100% {
        opacity: calc(.16 * var(--vis));
    }
}

@keyframes breathe {
    0%,
    100% {
        opacity: .32;
    }

    50% {
        opacity: 1;
    }
}

@keyframes glide {
    to {
        offset-distance: 99.9%;
    }
}

:root {
    --ca: #ff4136;
    --cb: #29b6ff;
    --cc: #ffd60a;
    --cd: #6ee86e;
    --ce: #ff53b0;
    --cf: #ff9a1f;

    --led: #bcd8ff;
    --led2: #2a6cff;

    --body: #0c0c10;
    --body-hsl: 232 22% 3%;
    --surface: #c9c9bb;
    --grey: color-mix(in srgb, var(--surface) 36%, var(--body));
    --surface1: color-mix(in srgb, var(--surface) 48%, var(--body));
    --pixel: #1a1820;
    --pixel-light: color-mix(in srgb, color-mix(in srgb, var(--led) 40%, transparent) 90%, white 10%);
    --conic: transparent 90deg, var(--pixel-light) 110deg, var(--pixel-light) 250deg, transparent 270deg;

    --pitch: 2rem;
    --dot: 1.2rem;
    --ring: 2.8rem;
    --screen-w: 88rem;
    --screen-h: 64rem;
    --bezel: 4rem;
    --panel-half: 36rem;

    --chase-time: 2s;
    --step: 34ms;
    --hue-time: 9s;
    --breathe-time: 5s;
    --train-speed: .085s;
}

html,
body {
    font-size: 1vmin;
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--body);
}

body {
    &:before,
    &:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 200;
        pointer-events: none;
    }

    &:before {
        background: linear-gradient(transparent, var(--led));
        mix-blend-mode: overlay;
        opacity: .1;
    }

    &:after {
        background: linear-gradient(90deg, #0005, transparent);
        box-shadow: inset 0 0 3rem var(--body);
    }
}

main {
    display: flex;
    flex-direction: column-reverse;
    height: 100%;

    &:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(var(--led2), transparent);
        z-index: 200;
        pointer-events: none;
        mix-blend-mode: soft-light;
        opacity: .3;
    }
}

background,
foreground {
    display: block;
    height: 50%;
}

background {
    background: linear-gradient(var(--grey), #0001 70%, #0000000D, #0003), var(--grey);
    z-index: 1;
}

foreground {
    background: linear-gradient(var(--surface1), #fff1), var(--surface1);
}

pixel-grid,
shadow {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -48rem;
    margin-top: -36rem;
    background: var(--body);
    width: var(--screen-w);
    height: var(--screen-h);
    padding: var(--bezel);
    border-radius: 1.4rem;
    box-sizing: content-box;
}

shadow {
    &:before,
    &:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        filter: blur(.6rem);
    }

    &:before {
        width: 100%;
        height: 100%;
        background: linear-gradient(-90deg, hsl(var(--body-hsl) / .35), transparent 55%);
        transform: translate3d(-52rem, 0, 0) skewY(8deg);
        transform-origin: 100%;
    }

    &:after {
        width: 100%;
        height: 70%;
        background: linear-gradient(hsl(var(--body-hsl) / .35) 45%, transparent 60%);
        transform: translate3d(-.1rem, 42rem, 0);
        border-radius: 50%;
    }
}

pixel-grid {
    z-index: 200;
    background: radial-gradient(at left bottom, #1a1820, var(--body));
    box-shadow: inset 0 0 2rem #000a;
    -webkit-box-reflect: below 0 linear-gradient(transparent, #0001, transparent);

    &:before {
        content: '';
        position: absolute;
        inset: -18rem;
        z-index: -1;
        border-radius: 50%;
        background: radial-gradient(closest-side, color-mix(in srgb, var(--led) 24%, transparent), transparent);
        filter: blur(4rem);
        pointer-events: none;
    }
}

screen {
    display: block;
    position: relative;
    width: var(--screen-w);
    height: var(--screen-h);
    overflow: hidden;
    background-co.........完整代码请登录后点击上方下载按钮下载查看