js+css实现赛博朋克传送门代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js+css实现赛博朋克传送门代码，双维空间 · 电影级景深 · 玻璃拟态界面，移动鼠标操控 · 点击右下角按钮切换界面显隐

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
    :root {
    --portal-x: 50vw;
    --portal-y: 50vh;
    --portal-radius: 170px;
    --parallax-x: 0px;
    --parallax-y: 0px;
    --cursor-x: 50vw;
    --cursor-y: 50vh;
    --trail-opacity: 0;
    --day-sky-top: #e2eef8;
    --day-sky-mid: #c4d8ec;
    --day-sky-horizon: #f0e6d6;
    --day-bldg-base: #f5f8fb;
    --day-bldg-shadow: rgba(120, 140, 165, 0.25);
    --day-ground: #e6dccc;
    --day-accent: #c8a87c;
    --night-sky-top: #040412;
    --night-sky-mid: #0d0828;
    --night-sky-horizon: #08081a;
    --night-bldg-base: #0b0b1e;
    --night-bldg-shadow: rgba(0, 0, 0, 0.7);
    --night-ground: #060612;
    --neon-pink: #ff2d85;
    --neon-cyan: #00e5ff;
    --neon-purple: #b347ea;
    --neon-gold: #ffb830;
    --neon-blue: #4a7aff;
    --portal-outer: #ff2d85;
    --portal-mid: #b347ea;
    --portal-inner: #00e5ff;
    --glass-bg: rgba(12, 12, 35, 0.60);
    --glass-border: rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

@media (max-width: 1024px) {
    :root {
        --portal-radius: 130px;
    }
}
@media (max-width: 768px) {
    :root {
        --portal-radius: 90px;
    }
}
@media (max-width: 480px) {
    :root {
        --portal-radius: 70px;
    }
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    font-family: 'Rajdhani', sans-serif;
    cursor: crosshair;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: none;
}

#universe {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.layer {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
}
.layer.base {
    z-index: 1;
}
.layer.lens {
    z-index: 2;
    clip-path: circle(var(--portal-radius) at var(--portal-x) var(--portal-y));
    pointer-events: none;
    transition: clip-path 0.05s ease-out;
    will-change: clip-path;
}

.half {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.theme-day {
    background: linear-gradient(180deg,
            var(--day-sky-top) 0%,
            var(--day-sky-mid) 40%,
            var(--day-sky-horizon) 72%,
            #f5ede0 100%);
}

.sky-day {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 30% 12%, rgba(255, 245, 220, 0.55), transparent 55%),
        radial-gradient(ellipse at 70% 20%, rgba(220, 235, 255, 0.25), transparent 40%);
}

.sun {
    position: absolute;
    top: 11%;
    left: 32%;
    width: 92px;
    height: 92px;
    background: radial-gradient(circle at 30% 25%, #fffcf0, #ffe8b8 25%, #ffd48a 55%, transparent 72%);
    border-radius: 50%;
    z-index: 1;
    box-shadow:
        0 0 60px 20px rgba(255, 210, 130, 0.5),
        0 0 130px 45px rgba(255, 200, 120, 0.30),
        0 0 200px 60px rgba(255, 180, 100, 0.12);
    animation: sunGlow 6s ease-in-out infinite;
    transform: translate(calc(var(--parallax-x) * 0.5), calc(var(--parallax-y) * 0.5));
}
@keyframes sunGlow {
    0%,
    100% {
        box-shadow: 0 0 60px 20px rgba(255, 210, 130, 0.5), 0 0 130px 45px rgba(255, 200, 120, 0.30);
    }
    50% {
        box-shadow: 0 0 80px 28px rgba(255, 220, 140, 0.6), 0 0 150px 55px rgba(255, 210, 130, 0.35);
    }
}

.clouds {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    transform: translate(calc(var(--parallax-x) * 0.2), calc(var(--parallax-y) * 0.12));
}
.cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.80);
    border-radius: 50%;
    box-shadow:
        0 0 50px 12px rgba(255, 255, 255, 0.30),
        0 8px 30px rgba(160, 175, 200, 0.12);
    filter: blur(0.4px);
    will-change: transform;
}
.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    background: inherit;
    border-radius: 50%;
    box-shadow: inherit;
}
.c1 {
    width: 140px;
    height: 44px;
    top: 16%;
    left: 18%;
    animation: cloudDrift1 34s linear infinite;
}
.c1::before {
    width: 62%;
    height: 150%;
    top: -55%;
    left: 6%;
}
.c1::after {
    width: 44%;
    height: 125%;
    top: -42%;
    left: 52%;
}
.c2 {
    width: 90px;
    height: 30px;
    top: 24%;
    left: 52%;
    animation: cloudDrift2 28s linear infinite;
    opacity: 0.70;
}
.c2::before {
    width: 58%;
    height: 145%;
    top: -52%;
    left: 8%;
}
.c2::after {
    width: 40%;
    height: 115%;
    top: -38%;
    left: 54%;
}
.c3 {
    width: 110px;
    height: 36px;
    top: 30%;
    left: 8%;
    animation: cloudDrift3 40s linear infinite;
    opacity: 0.50;
}
.c3::before {
    width: 55%;
    height: 135%;
    top: -48%;
    left: 5%;
}
.c3::after {
    width: 40%;
    height: 110%;
    top: -36%;
    left: 55%;
}
.c4 {
    width: 75px;
    height: 26px;
    top: 10%;
    left: 72%;
    animation: cloudDrift1 26s linear infinite reverse;
    opacity: 0.45;
}
.c4::before {
    width: 60%;
    height: 140%;
    top: -50%;
    left: 6%;
}
.c4::after {
    width: 38%;
    height: 112%;
    top: -36%;
    left: 56%;
}
@keyframes cloudDrift1 {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(80px);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes cloudDrift2 {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-60px);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes cloudDrift3 {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(100px);
    }
    100% {
        transform: translateX(0);
    }
}

.buildings-day {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 66%;
    z-index: 3;
}

.bldg-day {
    position: absolute;
    bottom: 0;
    border-radius: 4px 4px 0 0;
    transition: filter 0.2s;
}

.bd1 {
    left: 2%;
    width: 12%;
    height: 52%;
    z-index: 6;
    backgro.........完整代码请登录后点击上方下载按钮下载查看