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

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

聖光之護

发布： 2025-08-19 19:36:16

原创

247人浏览过

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

本文将介绍如何使用 CSS 实现一个简单的月亮升起和落下的动画效果。通过关键帧动画和 CSS 属性，我们可以模拟月亮从左上角升起，然后从右上角落下的过程。本文将提供详细的代码示例和解释，帮助你理解动画的实现原理，并解决动画结束后月亮仍然可见的问题。

实现原理

这个动画的核心是使用 CSS 的 @keyframes 规则来定义动画的关键帧，并通过 animation 属性将动画应用到月亮图片上。

关键帧动画 (@keyframes): 定义了动画的起始状态 (from) 和结束状态 (to)。在这个例子中，我们改变了 left 属性的值，使月亮从屏幕左侧移动到右侧。
动画属性 (animation): 用于控制动画的播放方式，包括动画名称、持续时间、时间函数、迭代次数、方向和填充模式等。

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

代码示例

以下是完整的 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;
}

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)
}

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

登录后复制

代码解释

box-sizing: border-box;: 保证元素的总宽度和高度包括内边距和边框。
body 样式:
- background-image: 设置背景图片为山脉图像。
- background-repeat: 禁止背景图片重复。
- background-size: 使背景图片覆盖整个容器。
- overflow-x: hidden;: 关键，隐藏水平方向的滚动条，解决动画结束后月亮仍然可见的问题。
img 样式:
- width 和 height: 设置月亮图片的尺寸。
- position: relative: 允许使用 left 属性进行定位。
- border-radius: 50%: 使月亮图片变成圆形。
- animation-name: 指定动画名称为 move。
- animation-duration: 设置动画持续时间为 2 秒。
- animation-timing-function: 设置动画的时间函数为 ease-in-out，使动画开始和结束时速度较慢。
- animation-iteration-count: 设置动画迭代次数为 1。
- animation-direction: 设置动画方向为 normal。
- animation-fill-mode: 设置动画填充模式为 both，使动画在开始前和结束后应用起始和结束状态的样式。
- transform: translateX(250): 初始位置向右偏移250px，保证初始状态完全隐藏。
@keyframes move:
- from: 设置动画的起始状态，将 left 属性设置为 -250px，使月亮从屏幕左侧移出。
- to: 设置动画的结束状态，将 left 属性设置为 110%，确保月亮完全移出屏幕右侧。

注意事项

overflow-x: hidden;: 这是解决动画结束后月亮仍然可见问题的关键。通过隐藏水平方向的溢出内容，可以确保月亮在动画结束后不会显示在屏幕上。
left: 110%;: 将 to 状态的 left 属性设置为略大于 100% 的值，可以确保月亮完全移出屏幕。
图片路径: 确保 HTML 代码中引用的月亮和山脉图片的 URL 是正确的。