HTML5 移动动画（Move Animation）

最新推荐文章于 2025-06-03 10:14:13 发布

请叫我飞哥@

最新推荐文章于 2025-06-03 10:14:13 发布

阅读量567

点赞数 16

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： html5 前端 html

本文链接：https://blog.youkuaiyun.com/qq_24459277/article/details/144983864

HTML5 专栏收录该内容

45 篇文章

订阅专栏

HTML5 移动动画（Move Animation）

移动动画是一种常见的网页动画效果，使元素在页面上平滑移动。以下是如何使用 CSS 和 HTML5 创建移动动画的详细说明。

1. 基本概念

移动动画：通过改变元素的位置来实现视觉效果，通常使用 CSS 的 @keyframes 动画功能。

2. HTML 结构

首先，创建一个简单的 HTML 结构，用于展示移动动画的元素。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动动画示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="move-box"></div>
</body>
</html>

3. CSS 样式

接下来，使用 CSS 来定义移动动画的样式。

/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    overflow: hidden; /* 防止滚动条出现 */
}

.move-box {
    width: 100px;
    height: 100px;
    background-color: #2ecc71;
    position: absolute; /* 绝对定位 */
    animation: move 3s linear infinite; /* 应用移动动画 */
}

/* 定义移动动画 */
@keyframes move {
    0% {
        transform: translate(0, 0); /* 起始位置 */
    }
    50% {
        transform: translate(300px, 0); /* 中间位置，向右移动300px */
    }
    100% {
        transform: translate(0, 0); /* 结束位置，回到起始位置 */
    }
}

4. 动画效果解释

animation 属性：用于定义动画的持续时间、速度曲线和循环次数。
- 3s：动画持续时间为 3 秒。
- linear：动画的速度保持一致。
- infinite：动画无限循环。
@keyframes：定义动画的关键帧。
- 在 0% 时，元素处于起始位置。
- 在 50% 时，元素向右移动 300 像素。
- 在 100% 时，元素回到起始位置。