CSS实现月升月落动画 月亮移出右侧仍可见问题解决方案

问题原因 #

出现横向滚动条、右滑能看到月亮的核心原因有两个：

1. 月亮使用relative定位，动画终点设为left:100%时，元素会超出视口范围，直接把页面整体宽度撑大，触发横向滚动
2. 页面没有设置横向溢出隐藏，超出视口的内容默认会显示，右滑就能看到跑出去的月亮

另外原有代码还有几个小问题：动画只有左右位移没有上下位移，达不到“升起-落下”的弧形效果；transform: translateX(250)没有写单位，属于无效代码；meta标签的viewport属性引号位置错误，会导致移动端适配失效。

修复步骤 #

• 给html、body标签添加横向溢出隐藏，直接裁剪超出视口的内容，杜绝横向滚动条
• 将月亮的定位改为fixed，让它相对于浏览器视口移动，不会撑开页面宽高
• 调整动画关键帧，加入上下方向的位移，模拟月亮从左上升起、到天空最高点、再从右上落下的弧线轨迹，终点位置设置为刚好完全移出右侧视口
• 清理无效代码，修正HTML标签的书写错误

修复后完整代码 #

CSS 部分（style.css） #

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body{
    /* 隐藏横向超出视口的内容，不出现横向滚动条 */
    overflow-x: hidden;
    min-height: 100vh;
}

@keyframes move{
    /* 动画起点：左上角视口外，偏低位置 */
    0%{
        left: -200px;
        top: 60vh;
    }
    /* 动画中点：视口中间偏上，升到最高点 */
    50%{
        left: 50vw;
        top: 10vh;
    }
    /* 动画终点：右上角视口外，和起点同高，完成下落 */
    100%{
        left: calc(100vw + 200px);
        top: 60vh;
    }
}

body {
    background-image: url("https://i.sstatic.net/ZO2wI.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

img{
    width: 150px;
    height: 200px;
    /* 固定定位，相对于视口移动，不撑开页面 */
    position: fixed;
    border-radius: 50%;
    animation: move 6s ease-in-out forwards;
}

HTML 部分 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Moon</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <img src="https://i.sstatic.net/M1OFe.png">
</body>
</html>

关键配置说明 #

• overflow-x: hidden：所有超出视口左右边界的内容都会被隐藏，不管月亮怎么动都不会出现横向滚动条，右滑也看不到超出的月亮
• position: fixed：月亮的位置完全相对于浏览器可视区域计算，移动时不会影响页面本身的宽高，不会把页面撑出滚动条
• 动画关键帧加入top属性变化：配合left的左右移动，形成自然的抛物线轨迹，符合真实月亮升落的视觉效果
• 动画终点用calc(100vw + 200px)：100vw是当前视口的总宽度，加200px是为了让宽度150px的月亮完全移出右侧视口，不会有残留显示
• 统一把动画相关属性简写为animation: move 6s ease-in-out forwards，代码更简洁，forwards表示动画结束后停在终点状态

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