/* 1. 基础布局与动画设置 */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 核心：应用动画 */
    /* 动画名称 持续时间 匀速 延迟5秒执行 保持最后状态 */
    animation: turnBlack 1s linear 5s forwards;
}

/* 2. 定义背景变黑的动画 */
@keyframes turnBlack {
    0% { background-color: #f0f0f0; } /* 初始浅灰色 */
    100% { background-color: #000000; } /* 最终黑色 */
}

/* 3. 图片样式 */
.center-img {
    max-width: 80%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}