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

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

DDD

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

原创

756人浏览过

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

本文将介绍如何使用 CSS 关键帧动画实现月亮从左上角升起，最终在右上角落下的动画效果。通过设置 overflow-x: hidden 属性，可以有效隐藏超出屏幕范围的元素，避免出现滚动条。同时，微调动画结束位置，确保月亮完全消失在视野之外，从而实现更加自然的动画效果。

动画原理

该动画的核心在于 CSS 关键帧 (@keyframes)，它定义了动画在不同时间点的状态。通过 left 属性的改变，控制月亮在水平方向上的移动，模拟升起和降落的效果。

代码实现

以下是实现该动画效果的 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);
}

登录后复制

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

登录后复制

代码解释：

@keyframes move: 定义名为 move 的关键帧动画。
- from { left: -250px; }: 动画起始时，月亮位于屏幕左侧之外 -250px 的位置。
- to { left: 110%; }: 动画结束时，月亮移动到屏幕右侧之外 110% 的位置。 110% 确保月亮完全移出屏幕，避免出现滚动条。
body:
- background-image: 设置背景图片。
- background-repeat: 禁止背景图片重复。
- background-size: 使背景图片覆盖整个屏幕。
- overflow-x: hidden;: 关键属性，隐藏水平方向上超出 body 元素的任何内容，防止出现滚动条。
img:
- width 和 height: 设置月亮图片的宽高。
- position: relative: 允许使用 left 属性进行定位。
- border-radius: 50%: 使月亮图片呈现圆形。
- animation-name: move: 应用名为 move 的动画。
- animation-duration: 2s: 动画持续时间为 2 秒。
- animation-timing-function: ease-in-out: 动画的缓动函数，使动画开始和结束时速度较慢，中间速度较快。
- animation-iteration-count: 1: 动画播放一次。
- animation-direction: normal: 动画正向播放。
- animation-fill-mode: both: 动画结束后，保持 to 状态的样式。
- transform: translateX(250): 初始位置向右偏移250px，确保在动画开始前，月亮在起始位置。

注意事项

图片资源： 确保提供的图片链接有效，并且图片尺寸适合。
overflow-x: hidden 的影响： 虽然 overflow-x: hidden 可以解决滚动条问题，但它会隐藏任何水平方向上超出 body 元素的其他内容。因此，在应用此属性时，需要确保不会影响其他元素的正常显示。
动画参数调整： 可以根据需要调整动画的 duration、timing-function 和 left 的起始和结束值，以获得最佳的动画效果。
兼容性： 该方法具有良好的浏览器兼容性，可以在主流浏览器上正常运行。