FastAPI 站点开发日记

11-13

写了一个主页的css，本来想好看一点，结果晚上拿手机一看，背景卡成PPT了

从某种意义上，这也算是一种技术。毕竟手机买了没几年，用Edge已经带不动这个css了

当时还特地用vercel设计的配色，现在只能删了

/* ==========================================================================
   动态渐变背景层
   ========================================================================== */
body::before {
    content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: -2;
    background: linear-gradient(to bottom, transparent 0%, rgba(255,230,200,0.5) 30%, rgba(255,210,170,0.6) 70%, transparent 100%);
    animation: layer-orange 7s ease-in-out infinite 1s;
}

body::after {
    content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: -1;
    background: linear-gradient(to bottom, transparent 0%, rgba(180,200,255,0.4) 40%, rgba(160,180,255,0.5) 80%, transparent 100%);
    animation: layer-blue 11s ease-in-out infinite 2s;
}

@keyframes layer-orange { 0%,100% { opacity: 0.6; } 40% { opacity: 0.3; } 70% { opacity: 0.7; } }
@keyframes layer-blue { 0%,100% { opacity: 0.5; } 35% { opacity: 0.7; } 65% { opacity: 0.2; } }

/* ==========================================================================
   头部波浪动画
   ========================================================================== */
.header-wave-white, .header::after, .wave-layer {
    position: absolute; bottom: 0; left: 0; width: 100%; pointer-events: none;
}

.header-wave-white {
    height: 80px; background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.7) 100%);
    border-radius: 0 0 50% 50% / 0 0 100% 100%; transform: scaleY(-1);
    animation: wave-white 10s ease-in-out infinite; z-index: 3;
}

.header::after {
    content: ''; height: 70px; background: linear-gradient(to bottom, transparent 0%, rgba(255,220,180,0.6) 100%);
    border-radius: 0 0 40% 40% / 0 0 80% 80%; transform: scaleY(-1);
    animation: wave-orange 12s ease-in-out infinite 1s; z-index: 4;
}

.wave-layer {
    height: 60px; background: linear-gradient(to bottom, transparent 0%, rgba(180,200,255,0.5) 100%);
    border-radius: 0 0 30% 30% / 0 0 60% 60%; transform: scaleY(-1);
    animation: wave-blue 15s ease-in-out infinite 2s; z-index: 5;
}

@keyframes wave-white { 0%,100% { border-radius: 0 0 50% 50% / 0 0 100% 100%; transform: scaleY(-1) translateY(0); } 50% { border-radius: 0 0 30% 30% / 0 0 60% 60%; transform: scaleY(-1) translateY(25px); } }
@keyframes wave-orange { 0%,100% { border-radius: 0 0 40% 40% / 0 0 80% 80%; transform: scaleY(-1) translateY(0); } 50% { border-radius: 0 0 20% 20% / 0 0 40% 40%; transform: scaleY(-1) translateY(18px); } }
@keyframes wave-blue { 0%,100% { border-radius: 0 0 30% 30% / 0 0 60% 60%; transform: scaleY(-1) translateY(0); } 50% { border-radius: 0 0 15% 15% / 0 0 30% 30%; transform: scaleY(-1) translateY(14px); } }