动画结束后如何让Logo相对导航栏居中且适配多屏幕？

我需要让Logo相对于导航栏居中，同时适配不同屏幕尺寸。注意：Logo有从屏幕左侧滑入至中央的动画，不能修改.carLogo选择器的left属性，否则会破坏动画效果。

当前代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DShop</title>
</head>
<body>
    <div>
        <nav>
            <a href="./index.html">Home</a>
            <a href="./about.html">About</a>
            <a href="">Reviews</a>
            <a href="./order.html">Order Now</a>
            <div class="animation start-home"></div> 
        </nav>
    </div>
    <div class="carLogo-container">
        <img src="images/DDimage2.jpeg" alt="carLogo" class="carLogo">
    </div>
    <script src="app.js"></script>
</body>
</html>

CSS代码 #

/* -------nav bar for all pages------ */
nav {
    margin: 20px auto;
    position: relative;
    width: 470px;
    height: 50px;
    background-color: #34495e;
    border-radius: 8px;
    font-size: 0;
}

nav a {
    line-height: 50px;
    height: 100%;
    font-size: 15px;
    font-family: Arial Rounded MT Bold;
    display: inline-block;
    position: relative;
    z-index: 1;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    color: white;
    cursor: pointer;
}

nav .animation {
    position: absolute;
    height: 100%;
    top: 0;
    z-index: 0;
    transition: all .5s ease 0s;
    border-radius: 8px;
}
a:nth-child(1) {
    width: 100px;
}
a:nth-child(2) {
    width: 110px;
}
a:nth-child(3) {
    width: 100px;
}
a:nth-child(4) {
    width: 160px;
}
nav .start-home, a:nth-child(1):hover~.animation {
    width: 100px;
    left: 0;
    background-color: #1e90ff;
}
nav .start-home, a:nth-child(2):hover~.animation {
    width: 110px;
    left: 100px;
    background-color: #1e90ff;
}
nav .start-home, a:nth-child(3):hover~.animation {
    width: 100px;
    left: 210px;
    background-color: #1e90ff;
}
nav .start-home, a:nth-child(4):hover~.animation {
    width: 160px;
    left: 310px;
    background-color: #1e90ff;
}

/* ------- Home Page ------- */

body {
    font-family: sans-serif;
    background: #bfc2c4;
}

.carLogo {
    display: block;
    position: relative;
    left: -100px;
    animation: move-right 1s ease forwards;
    animation-fill-mode: forwards;
    transform: translateX(-50%);
}

@keyframes move-right {
    100% {
        left: calc(60% - 100px);
    }
}

已尝试的方法 #

• 修改.carLogo的left属性，导致动画失效；
• 将.carLogo的display改为flex或inline-block，无效果；
• 修改@keyframes move-right中的值为60%，仅适配笔记本屏幕，无法兼容全尺寸。

核心思路是让Logo容器和导航栏采用完全一致的居中规则，再基于容器实现Logo的居中动画，既保留原动画逻辑，又适配所有屏幕。

修改步骤 #

1. 给导航栏父容器添加统一类名，和Logo容器对齐；
2. 调整Logo的定位方式，基于容器实现居中；
3. 修改动画目标位置，使用容器相对的居中方案。

修改后的HTML（仅调整导航父容器）

<div class="nav-container">
    <nav>
        <a href="./index.html">Home</a>
        <a href="./about.html">About</a>
        <a href="">Reviews</a>
        <a href="./order.html">Order Now</a>
        <div class="animation start-home"></div> 
    </nav>
</div>
<div class="carLogo-container">
    <img src="images/DDimage2.jpeg" alt="carLogo" class="carLogo">
</div>

修改后的CSS（关键调整部分）

/* 新增：让导航容器和Logo容器保持一致的居中规则 */
.nav-container, .carLogo-container {
    width: 100%;
    max-width: 470px; /* 和导航栏宽度完全匹配 */
    margin: 0 auto;
    position: relative;
}

/* 调整Logo样式：改为绝对定位，基于容器动画 */
.carLogo {
    display: block;
    position: absolute;
    left: -100px;
    animation: move-right 1s ease forwards;
    animation-fill-mode: forwards;
}

/* 修改动画目标：基于容器的50%位置实现居中 */
@keyframes move-right {
    100% {
        left: 50%;
        transform: translateX(-50%);
    }
}

原理说明 #

• 导航容器和Logo容器的宽度、居中规则完全一致，确保Logo的居中基准和导航栏对齐；
• Logo改为绝对定位后，动画的left:50%配合transform: translateX(-50%)是标准的自适应居中方案，不管屏幕尺寸如何变化，都会始终在导航栏正下方居中；
• 原有的左侧滑入动画逻辑完全保留，仅修改了动画的目标位置，不会破坏原有效果。

内容的提问来源于stack exchange，提问作者TacoMaster151