本文将介绍如何使用CSS实现月亮从左上角升起，然后从右上角落下的动画效果。通过简单的CSS动画和overflow-x: hidden属性，可以轻松创建一个沉浸式的月亮动画，并解决动画结束后月亮仍然可见的问题。本文将提供完整的代码示例，帮助你快速掌握该动画的实现方法。
实现原理
这个动画的核心在于使用CSS的@keyframes规则定义一个名为move的动画。该动画通过改变月亮图片的left属性，使其从屏幕左侧移动到右侧，模拟月亮的升起和落下。为了避免动画结束后月亮仍然在屏幕上可见，我们使用overflow-x: hidden属性隐藏超出body水平范围的内容。
代码实现
以下是完整的HTML和CSS代码：
HTML (index.html):
立即学习“前端免费学习笔记（深入）”；
Animated Moon
@@##@@
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等。
总结
通过本文，你学习了如何使用CSS实现一个简单的月亮升起和落下的动画效果。 关键在于使用@keyframes定义动画，并使用overflow-x: hidden属性隐藏超出屏幕范围的内容。 你可以根据自己的需求调整代码，创造出更丰富的动画效果。
