index.css

* {
    padding: 0;
    margin: 0;
}
:root{
    --Side-Menu-BgColor: #3b4147;
    --Side-Menu-BgHoverColor: #abafb3;
    --Side-Menu-FontColor: #f0f0f0;
    --Side-Menu-HoverColor: #ffffff;
    --border-radius: 3px;
    --Side-Menu-TransitionTime: 0.2s;
    --Side-Menu-LineColor: #d19a66;
}
.content {
    background-color: #fefefe;
}
@font-face {
    font-family: SpaceClaim;
    src: url("SpaceClaim.ttf") format("truetype");
}
@font-face {
    font-family: Segoe;
    src: url("Segoe.ttf") format("truetype");
}
@font-face {
    font-family: SegoeB;
    font-weight: bold;
    src: url("SegoeB.ttf") format("truetype");
}

/* -------------------------- 开场动画关键帧（核心新增）-------------------------- */
/* 淡入动画：用于开场语、菜单项、主内容 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* 淡入上移动画：用于标题（更有层次感） */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px); /* 初始位置向下偏移 30px */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* 回归正常位置 */
    }
}
/* 左滑淡入动画：用于侧边栏（从屏幕外滑入） */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%); /* 初始位置在屏幕左侧外 */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* 滑到正常位置 */
    }
}

/* -------------------------- 侧边栏样式（添加动画）-------------------------- */
.Side-Menu-Box{
    position: fixed; /* 改为固定定位，避免滑入时影响布局 */
    top: 0;
    left: 0;
    z-index: 999; /* 确保侧边栏在最上层 */
    box-shadow: 2px 0px 8px 5px #cdd2d7;
    font-family: SpaceClaim;
    letter-spacing: 0.5px;
    font-weight: 400;
    min-height: 100vh;
    box-sizing: border-box;
    background-color: var(--Side-Menu-BgColor);
    /* 侧边栏开场动画：0.8秒滑入，结尾平滑 */
    animation: slideInLeft 0.8s ease-out forwards;
    opacity: 0; /* 初始透明，动画结束后显示 */
}
.Side-Menu-Box input[type='checkbox']{
    display: none;
}
/* 侧边栏菜单项：依次淡入（每个延迟 0.1 秒，更有节奏感） */
.Side-Menu{
    padding: 4px 12px;
    font-size: 20px;
    width: 200px;
    min-height: 100%;
    cursor: pointer;
    overflow: hidden;
    transition: width var(--Side-Menu-TransitionTime), background-color 0.2s;
    color: var(--Side-Menu-FontColor);
    animation: fadeIn 0.5s ease-out forwards;
    opacity: 0;
}
/* 为每个菜单项设置不同延迟，依次出现 */
.Side-Menu:nth-child(1) { animation-delay: 0.6s; } /* 首页 */
.Side-Menu:nth-child(2) { animation-delay: 0.7s; } /* 镜像源 */
.Side-Menu:nth-child(3) { animation-delay: 0.8s; } /* 教程 */
.Side-Menu:nth-child(4) { animation-delay: 0.9s; } /* 开发日志 */

.Side-Menu:hover{
    background-color: var(--Side-Menu-BgHoverColor);
    color: var(--Side-Menu-HoverColor); /*  hover 时字体变白，增强交互 */
}

/* -------------------------- 标题样式（添加动画）-------------------------- */
.BigTitle {
    display: inline-block;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 40px;
    font-weight: 999;
    color: #5da0b7;
    text-transform: uppercase;
    /* 标题动画：0.8秒淡入上移，延迟 0.3 秒（等侧边栏开始滑入后再动） */
    animation: fadeInUp 0.8s ease-out 0.3s forwards;
    opacity: 0; /* 初始透明 */
}

/* -------------------------- 开场语样式（新增）-------------------------- */
.opening-text {
    font-family: SegoeB;
    font-size: 24px;
    color: #3b4147;
    margin: 20px 0;
    padding-left: 2px;
    /* 开场语动画：1秒淡入，延迟 0.1 秒 */
    animation: fadeIn 1s ease-out 0.1s forwards;
    opacity: 0;
}

/* -------------------------- 主内容区域（调整布局+动画）-------------------------- */
.Content-Page{
    padding-top: 10px;
    padding-left: 20px;
    margin-left: 220px; /* 给侧边栏留空间，避免重叠 */
    overflow: hidden;
    /* 主内容淡入动画，延迟 0.5 秒（最后显示，避免混乱） */
    animation: fadeIn 1s ease-out 0.5s forwards;
    opacity: 0;
}
.Menu{
    text-decoration: none;
    color: var(--Side-Menu-FontColor);
}
.paragraph{
    padding: 10px 0 10px 0;
    line-height: 1.6; /* 优化文字行高，提升可读性 */
}