CSS实现月亮升起与落下的动画效果-html教程-PHP中文网

CSS实现月亮升起与落下的动画效果

DDD

发布： 2025-08-19 19:14:01

原创

416人浏览过

css实现月亮升起与落下的动画效果

本文将介绍如何使用CSS实现月亮从左上角升起，然后从右上角落下的动画效果。通过简单的CSS动画和overflow-x: hidden属性，可以轻松创建一个沉浸式的月亮动画，并解决动画结束后月亮仍然可见的问题。本文将提供完整的代码示例，帮助你快速掌握该动画的实现方法。

实现原理

这个动画的核心在于使用CSS的@keyframes规则定义一个名为move的动画。该动画通过改变月亮图片的left属性，使其从屏幕左侧移动到右侧，模拟月亮的升起和落下。为了避免动画结束后月亮仍然在屏幕上可见，我们使用overflow-x: hidden属性隐藏超出body水平范围的内容。

代码实现

以下是完整的HTML和CSS代码：

HTML (index.html):

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

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

<!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="https://i.sstatic.net/M1OFe.png" alt="Moon">
    </header>
</body>
</html>

登录后复制

CSS (style.css):

*{
    box-sizing: border-box;
}

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

body {
    background-image: url("https://i.sstatic.net/ZO2wI.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    overflow-x: hidden; /* 隐藏超出水平范围的内容 */
}

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;
    transform: translateX(250);
}

登录后复制

代码解释

box-sizing: border-box;: 确保元素的总宽度和高度包括内边距和边框，简化布局计算。
@keyframes move: 定义名为move的动画，控制月亮图片的水平位置。
- from { left: -250px; }: 动画开始时，月亮位于屏幕左侧之外，-250px确保月亮完全隐藏。
- to { left: 110%; }: 动画结束时，月亮移动到屏幕右侧之外，110%确保月亮完全移出屏幕，避免滚动条出现。
body: 设置背景图片，并使用overflow-x: hidden隐藏超出水平范围的内容，解决动画结束后月亮仍然可见的问题。
img: 设置月亮图片的样式，包括宽度、高度、位置、圆角等。
- position: relative;: 允许使用left属性控制图片的位置。
- animation-*: 设置动画的名称、持续时间、时间函数、迭代次数、方向和填充模式。
- animation-fill-mode: both;: 动画结束后，保持动画的最后一个状态。
- transform: translateX(250);: 初始状态将月亮向右偏移250px，防止动画开始时月亮直接出现在左侧。

注意事项

图片路径: 确保background-image和img src的路径正确，指向你的图片文件。
动画参数: 根据需要调整animation-duration、animation-timing-function等参数，以获得最佳的动画效果。
浏览器兼容性: CSS动画在现代浏览器中得到广泛支持，但对于旧版本的浏览器，可能需要添加前缀，例如-webkit-animation、-moz-animation等。