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

HTML 闪烁动画（Blink Animation）

article 2025/1/14 14:23:51

HTML 闪烁动画（Blink Animation）

闪烁动画是一种动态效果，使元素周期性地显现和消失，常用于吸引用户注意。以下是如何使用 CSS 和 HTML 创建闪烁动画的详细说明。

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="blink-box">闪烁文本</div>
</body>
</html>

3. CSS 样式

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

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

.blink-box {
    font-size: 24px;
    color: #e74c3c;
    animation: blink 1s step-start infinite; /* 应用闪烁动画 */
}

/* 定义闪烁动画 */
@keyframes blink {
    0%, 100% {
        opacity: 1; /* 显现 */
    }
    50% {
        opacity: 0; /* 消失 */
    }
}

4. 动画效果解释

animation 属性：用于定义动画的持续时间、速度曲线和循环次数。
- 1s：动画持续时间为 1 秒。
- step-start：使动画在每个关键帧之间突然变化，而不是平滑过渡。
- infinite：动画无限循环。
@keyframes：定义动画的关键帧。
- 在 0% 和 100% 时，元素的透明度为 1（完全显现）。
- 在 50% 时，元素的透明度为 0（完全消失）。