本文将介绍如何使用 CSS 实现一个简单的月亮升起和落下的动画效果。通过关键帧动画和 CSS 属性，我们可以模拟月亮从左上角升起，然后从右上角落下的过程。本文将提供详细的代码示例和解释，帮助你理解动画的实现原理，并解决动画结束后月亮仍然可见的问题。
实现原理
这个动画的核心是使用 CSS 的 @keyframes 规则来定义动画的关键帧，并通过 animation 属性将动画应用到月亮图片上。
关键帧动画 (@keyframes): 定义了动画的起始状态 (from) 和结束状态 (to)。在这个例子中，我们改变了 left 属性的值，使月亮从屏幕左侧移动到右侧。
动画属性 (animation): 用于控制动画的播放方式，包括动画名称、持续时间、时间函数、迭代次数、方向和填充模式等。
立即学习“前端免费学习笔记（深入）”；
代码示例
以下是完整的 HTML 和 CSS 代码，用于实现月亮升起和落下的动画效果：
HTML (index.html):
Animated Moon @@##@@
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 动画的实现原理，并在你的项目中应用这些技巧。
以上就是CSS 实现月亮升起与落下的动画效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1572911.html
微信扫一扫 
支付宝扫一扫 
