本文将介绍如何使用 CSS 关键帧动画 keyframes 实现一个简单的月亮升起与降落的动画效果。我们将通过控制月亮图片的位置，模拟月亮从左上角升起，最终消失在右上角的过程。同时，我们将解决动画结束后月亮仍然可见的问题，确保动画的完整性和视觉效果。
实现步骤
- HTML 结构:
首先，我们需要在 HTML 文件中创建一个包含月亮图片的 <img> 元素。
<!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="moon.png" alt="Moon">
</header>
</body>
</html>请确保将 moon.png 替换为你实际的月亮图片路径。
- CSS 样式:
接下来，我们在 style.css 文件中添加 CSS 样式，包括关键帧动画的定义和月亮图片的样式。
立即学习“前端免费学习笔记（深入）”；
*{
box-sizing: border-box;
}
body {
background-image: url("mountain.jpg");
background-repeat: no-repeat;
background-size: cover;
overflow-x: hidden; /* 关键：隐藏超出 body 宽度的内容 */
}
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;
}
@keyframes move {
from {
left: -250px;
}
to {
left: 110%; /* 确保月亮完全移出屏幕 */
}
}请确保将 mountain.jpg 替换为你实际的山脉背景图片路径。
代码解释
- body { overflow-x: hidden; }: 这是解决动画结束后月亮仍然可见的关键。overflow-x: hidden 属性会隐藏超出 body 元素水平方向的内容，从而确保月亮在动画结束后完全消失。
- @keyframes move: 定义了名为 move 的关键帧动画。
- from { left: -250px; }: 动画开始时，月亮位于屏幕左侧 -250px 的位置，使其从屏幕外升起。
- to { left: 110%; }: 动画结束时，月亮位于屏幕右侧 110% 的位置，确保完全移出屏幕。建议使用大于100%的值，确保完全移除。
- animation-fill-mode: both;: 这个属性决定了动画在播放前和播放后的状态。both 值表示动画会应用 from 的样式在动画开始前，并应用 to 的样式在动画结束后。
注意事项
- 图片路径: 确保 moon.png 和 mountain.jpg 的路径正确，否则图片将无法显示。
- 动画时间: animation-duration 属性控制动画的持续时间。你可以根据需要调整这个值。
- overflow-x: hidden: 该属性可能会影响页面上其他元素的水平滚动，使用时请谨慎。
- 浏览器兼容性: CSS 动画具有良好的浏览器兼容性，但在某些旧版本浏览器上可能需要添加前缀。
总结
通过使用 CSS 关键帧动画和 overflow-x: hidden 属性，我们可以轻松实现一个简单的月亮升起与降落的动画效果。这个方法不仅简单易懂，而且具有良好的可定制性，可以根据需要调整动画的参数和样式。在实际项目中，可以根据需求调整图片，动画时长等，实现更复杂的动画效果。
