本文将介绍如何使用 CSS 实现一个简单的月亮升起和落下的动画效果。通过关键帧动画和 CSS 属性，我们可以模拟月亮从左上角升起，然后从右上角落下的过程。本文将提供详细的代码示例和解释，帮助你理解动画的实现原理，并解决动画结束后月亮仍然可见的问题。
实现原理
这个动画的核心是使用 CSS 的 @keyframes 规则来定义动画的关键帧，并通过 animation 属性将动画应用到月亮图片上。
关键帧动画 (@keyframes): 定义了动画的起始状态 (from) 和结束状态 (to)。在这个例子中，我们改变了 left 属性的值，使月亮从屏幕左侧移动到右侧。
-
动画属性 (animation): 用于控制动画的播放方式，包括动画名称、持续时间、时间函数、迭代次数、方向和填充模式等。
立即学习“前端免费学习笔记（深入）”；
代码示例
以下是完整的 HTML 和 CSS 代码，用于实现月亮升起和落下的动画效果：
HTML (index.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>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 是正确的。
总结
通过使用 CSS 关键帧动画和 overflow-x: hidden; 属性，我们可以轻松实现一个简单的月亮升起和落下的动画效果。希望本文能够帮助你理解 CSS 动画的实现原理，并在你的项目中应用这些技巧。
