当前位置：首页 > article >正文

HTML5 旋转动画（Rotate Animation）详解

article 2025/1/9 6:31:37

HTML5 旋转动画（Rotate 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="rotate-box"></div>
</body>
</html>

3. CSS 样式

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

/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.rotate-box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    border-radius: 10px;
    animation: rotate 2s linear infinite; /* 应用旋转动画 */
}

/* 定义旋转动画 */
@keyframes rotate {
    from {
        transform: rotate(0deg); /* 起始角度 */
    }
    to {
        transform: rotate(360deg); /* 结束角度 */
    }
}

4. 动画效果解释

animation 属性：用于定义动画的持续时间、速度曲线和循环次数。
- 2s：动画持续时间为 2 秒。
- linear：动画的速度保持一致。
- infinite：动画无限循环。
@keyframes：定义动画的关键帧，从 0deg 旋转到 360deg。