本文将介绍如何使用 CSS 关键帧动画 keyframes 实现一个简单的月亮升起与降落的动画效果。我们将通过控制月亮图片的位置，模拟月亮从左上角升起，最终消失在右上角的过程。同时，我们将解决动画结束后月亮仍然可见的问题，确保动画的完整性和视觉效果。
实现步骤
HTML 结构:
首先，我们需要在 HTML 文件中创建一个包含月亮图片的 元素。
Animated Moon @@##@@
请确保将 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 属性，我们可以轻松实现一个简单的月亮升起与降落的动画效果。这个方法不仅简单易懂，而且具有良好的可定制性，可以根据需要调整动画的参数和样式。在实际项目中，可以根据需求调整图片，动画时长等，实现更复杂的动画效果。
以上就是CSS 实现月亮升起与降落动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1572915.html
微信扫一扫 
支付宝扫一扫 
