本文将介绍如何使用 CSS 关键帧动画实现月亮从左上角升起，最终在右上角落下的动画效果。通过设置 overflow-x: hidden 属性，可以有效隐藏超出屏幕范围的元素，避免出现滚动条。同时，微调动画结束位置，确保月亮完全消失在视野之外，从而实现更加自然的动画效果。
动画原理
该动画的核心在于 CSS 关键帧 (@keyframes)，它定义了动画在不同时间点的状态。 通过 left 属性的改变，控制月亮在水平方向上的移动，模拟升起和降落的效果。
代码实现
以下是实现该动画效果的 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);}
以下是HTML代码：
立即学习“前端免费学习笔记（深入）”；
Animated Moon @@##@@
代码解释：
@keyframes move: 定义名为 move 的关键帧动画。
from { left: -250px; }: 动画起始时，月亮位于屏幕左侧之外 -250px 的位置。to { left: 110%; }: 动画结束时，月亮移动到屏幕右侧之外 110% 的位置。 110% 确保月亮完全移出屏幕，避免出现滚动条。
body:
background-image: 设置背景图片。background-repeat: 禁止背景图片重复。background-size: 使背景图片覆盖整个屏幕。overflow-x: hidden;: 关键属性，隐藏水平方向上超出 body 元素的任何内容，防止出现滚动条。
img:
width 和 height: 设置月亮图片的宽高。position: relative: 允许使用 left 属性进行定位。border-radius: 50%: 使月亮图片呈现圆形。animation-name: move: 应用名为 move 的动画。animation-duration: 2s: 动画持续时间为 2 秒。animation-timing-function: ease-in-out: 动画的缓动函数，使动画开始和结束时速度较慢，中间速度较快。animation-iteration-count: 1: 动画播放一次。animation-direction: normal: 动画正向播放。animation-fill-mode: both: 动画结束后，保持 to 状态的样式。transform: translateX(250): 初始位置向右偏移250px，确保在动画开始前，月亮在起始位置。
注意事项
图片资源： 确保提供的图片链接有效，并且图片尺寸适合。overflow-x: hidden 的影响： 虽然 overflow-x: hidden 可以解决滚动条问题，但它会隐藏任何水平方向上超出 body 元素的其他内容。 因此，在应用此属性时，需要确保不会影响其他元素的正常显示。动画参数调整： 可以根据需要调整动画的 duration、timing-function 和 left 的起始和结束值，以获得最佳的动画效果。兼容性： 该方法具有良好的浏览器兼容性，可以在主流浏览器上正常运行。
总结
通过使用 CSS 关键帧动画和 overflow-x: hidden 属性，可以轻松实现月亮升起和降落的动画效果。 该方法简单易懂，并且具有良好的可定制性，可以根据实际需求进行调整。在实际开发中，可以根据需要添加更多的动画效果，例如改变月亮的大小、颜色等，以增强动画的视觉效果。
以上就是CSS 实现月亮升起与降落动画效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1572909.html
微信扫一扫 
支付宝扫一扫 
