复古与AI融合：打造独特怀旧科技风格网站

色彩方案：经典与现代的碰撞

为了营造出复古与科技融合的效果，我们可以选择以20世纪中期的经典色彩为主色调。例如：

• 复古蓝（#4682B4）
• 奶油黄（#F5DEB3）
• 复古橙（#FFA500）

同时，添加现代霓虹色系作为点缀，如：

• 霓虹粉（#FF007F）
• 霓虹蓝（#00FFFF）

:root {
    --retro-blue: #4682B4;
    --cream-yellow: #F5DEB3;
    --neon-pink: #FF007F;
}

body {
    background-color: var(--cream-yellow);
    color: var(--retro-blue);
}

a {
    color: var(--neon-pink);
}

排版布局：对称与层次的结合

采用经典的网格布局，并强调对称和平衡原则。导航栏固定于顶部，内容区突出核心信息，底部放置辅助性信息或版权说明。

<header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
</header>

<main>
    <section>
        <h1>欢迎来到我们的网站</h1>
        <p>这里是主要内容区域。</p>
    </section>
</main>

<footer>
    <p>© 怀旧科技风格网站</p>
</footer>

关键视觉元素：强化怀旧主题

使用手绘风格插画、复古滤镜处理的照片以及带有纹理细节的扁平化图标，可以进一步增强怀旧主题。例如，可以使用 SVG 格式的图标并为其添加纹理效果：

svg.icon {
    filter: url(#texture-effect);
}

<svg>
    <defs>
        <filter id="texture-effect">
            <feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="2" result="noise"></feTurbulence>
            <feDisplacementMap in="SourceGraphic" in2="noise" scale="10" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
        </filter>
    </defs>
    <path d="M10 10 H 90 V 90 H 10 Z" fill="var(--retro-blue)" />
</svg>

交互设计：提升用户参与感

按钮和链接可以通过悬停动画增加趣味性。例如，为按钮添加轻微抖动或渐变色过渡效果：

button {
    background-color: var(--retro-blue);
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

button:hover {
    animation: shake 0.5s linear infinite;
    background-color: var(--neon-pink);
}

@keyframes shake {
    0% { transform: translate(0); }
    25% { transform: translate(-5px, 0); }
    50% { transform: translate(5px, 0); }
    75% { transform: translate(-5px, 0); }
    100% { transform: translate(0); }
}

动态主题切换：满足个性化需求

允许用户选择不同的复古配色方案，可以通过 JavaScript 实现动态主题切换功能：

const themes = {
    "theme-1": { "--primary-color": "#4682B4", "--accent-color": "#FF007F" },
    "theme-2": { "--primary-color": "#FFA500", "--accent-color": "#00FFFF" }
};

function applyTheme(themeName) {
    const root = document.documentElement;
    Object.entries(themes[themeName]).forEach(([key, value]) => {
        root.style.setProperty(key, value);
    });
}

// 示例调用
applyTheme("theme-1");

图片展示