CSS 实现月亮升起与降落动画-html教程-PHP中文网

CSS 实现月亮升起与降落动画

DDD

发布： 2025-08-19 19:30:02

原创

841人浏览过

css 实现月亮升起与降落动画

本文将介绍如何使用 CSS 关键帧动画 keyframes 实现一个简单的月亮升起与降落的动画效果。我们将通过控制月亮图片的位置，模拟月亮从左上角升起，最终消失在右上角的过程。同时，我们将解决动画结束后月亮仍然可见的问题，确保动画的完整性和视觉效果。

实现步骤

HTML 结构:

首先，我们需要在 HTML 文件中创建一个包含月亮图片的 <img> 元素。

<!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>
    <header>
        <img src="moon.png" alt="Moon">
    </header>
</body>
</html>

登录后复制

请确保将 moon.png 替换为你实际的月亮图片路径。

CSS 样式:

接下来，我们在 style.css 文件中添加 CSS 样式，包括关键帧动画的定义和月亮图片的样式。

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

立即学习“前端免费学习笔记（深入）”；

*{
    box-sizing: border-box;
}

body {
    background-image: url("mountain.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    overflow-x: hidden; /* 关键：隐藏超出 body 宽度的内容 */
}

img {
    width: 150px;
    height: 200px;
    position: relative;
    border-radius: 50%;
    animation-name: move;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
}

@keyframes move {
    from {
        left: -250px;
    }
    to {
        left: 110%; /* 确保月亮完全移出屏幕 */
    }
}

登录后复制

请确保将 mountain.jpg 替换为你实际的山脉背景图片路径。

代码解释

body { overflow-x: hidden; }: 这是解决动画结束后月亮仍然可见的关键。overflow-x: hidden 属性会隐藏超出 body 元素水平方向的内容，从而确保月亮在动画结束后完全消失。
@keyframes move: 定义了名为 move 的关键帧动画。
- from { left: -250px; }: 动画开始时，月亮位于屏幕左侧 -250px 的位置，使其从屏幕外升起。
- to { left: 110%; }: 动画结束时，月亮位于屏幕右侧 110% 的位置，确保完全移出屏幕。建议使用大于100%的值，确保完全移除。
animation-fill-mode: both;: 这个属性决定了动画在播放前和播放后的状态。both 值表示动画会应用 from 的样式在动画开始前，并应用 to 的样式在动画结束后。