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

HTML5 渐变动画（Gradient Animation）

article 2025/1/11 19:06:20

HTML5 渐变动画（Gradient 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="gradient-box"></div>
</body>
</html>

3. CSS 样式

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

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

.gradient-box {
    width: 300px;
    height: 300px;
    background: linear-gradient(45deg, #ff6b6b, #f7b733); /* 初始渐变背景 */
    animation: gradientAnimation 5s ease infinite; /* 应用渐变动画 */
}

/* 定义渐变动画 */
@keyframes gradientAnimation {
    0% {
        background: linear-gradient(45deg, #ff6b6b, #f7b733);
    }
    50% {
        background: linear-gradient(45deg, #6bcfff, #ff6b6b);
    }
    100% {
        background: linear-gradient(45deg, #ff6b6b, #f7b733);
    }
}

4. 动画效果解释

animation 属性：用于定义动画的持续时间、速度曲线和循环次数。
- 5s：动画持续时间为 5 秒。
- ease：动画的速度在开始和结束时较慢，中间较快。
- infinite：动画无限循环。
@keyframes：定义动画的关键帧。
- 在 0% 和 100% 时，元素的背景为第一个渐变。
- 在 50% 时，元素的背景变为第二个渐变。