本文将介绍如何使用 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 的起始和结束值，以获得最佳的动画效果。
- 兼容性： 该方法具有良好的浏览器兼容性，可以在主流浏览器上正常运行。
总结
通过使用 CSS 关键帧动画和 overflow-x: hidden 属性，可以轻松实现月亮升起和降落的动画效果。 该方法简单易懂，并且具有良好的可定制性，可以根据实际需求进行调整。在实际开发中，可以根据需要添加更多的动画效果，例如改变月亮的大小、颜色等，以增强动画的视觉效果。
