CSS实现月亮升起与落下的动画效果-小浪学习网

CSS实现月亮升起与落下的动画效果

本文将介绍如何使用css实现月亮从左上角升起，然后从右上角落下的动画效果。通过简单的CSS动画和overflow-x: hidden属性，可以轻松创建一个沉浸式的月亮动画，并解决动画结束后月亮仍然可见的问题。本文将提供完整的代码示例，帮助你快速掌握该动画的实现方法。

实现原理

这个动画的核心在于使用CSS的@keyframes规则定义一个名为move的动画。该动画通过改变月亮图片的left属性，使其从屏幕左侧移动到右侧，模拟月亮的升起和落下。为了避免动画结束后月亮仍然在屏幕上可见，我们使用overflow-x: hidden属性隐藏超出body水平范围的内容。

代码实现

以下是完整的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>         @@##@@     </header> </body> </html>

CSS (style.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); }

代码解释

box-sizing: border-box;: 确保元素的总宽度和高度包括内边距和边框，简化布局计算。
@keyframes move: 定义名为move的动画，控制月亮图片的水平位置。
- from { left: -250px; }: 动画开始时，月亮位于屏幕左侧之外，-250px确保月亮完全隐藏。
- to { left: 110%; }: 动画结束时，月亮移动到屏幕右侧之外，110%确保月亮完全移出屏幕，避免滚动条出现。
body: 设置背景图片，并使用overflow-x: hidden隐藏超出水平范围的内容，解决动画结束后月亮仍然可见的问题。
img: 设置月亮图片的样式，包括宽度、高度、位置、圆角等。
- position: relative;: 允许使用left属性控制图片的位置。
- animation-*: 设置动画的名称、持续时间、时间函数、迭代次数、方向和填充模式。
- animation-fill-mode: both;: 动画结束后，保持动画的最后一个状态。
- transform: translateX(250);: 初始状态将月亮向右偏移250px，防止动画开始时月亮直接出现在左侧。

注意事项

图片路径: 确保background-image和img src的路径正确，指向你的图片文件。
动画参数: 根据需要调整animation-duration、animation-timing-function等参数，以获得最佳的动画效果。
浏览器兼容性: CSS动画在现代浏览器中得到广泛支持，但对于旧版本的浏览器，可能需要添加前缀，例如-webkit-animation、-moz-animation等。