CSS怎样制作文字逐字闪烁效果？animation-step分帧

animation-step

steps()

steps()

<span>

<span>

<div class="flicker-text-container">
    <p>
        <span>C</span><span>S</span><span>S</span>
        <span>闪</span><span>烁</span><span>效</span><span>果</span>
        <span>真</span><span>酷</span>
    </p>
</div>

.flicker-text-container {
    font-family: 'monospace', 'Courier New', monospace; /* 模拟数字显示字体 */
    font-size: 3em;
    color: #0f0; /* 经典的绿色荧光效果 */
    text-shadow: 0 0 5px #0f0, 0 0 10px #0f0, 0 0 20px #0f0; /* 增加辉光效果 */
    background-color: #1a1a1a;
    padding: 20px;
    display: inline-block; /* 让容器适应内容宽度 */
    overflow: hidden; /* 防止文字溢出容器 */
}

.flicker-text-container p {
    display: flex; /* 让文字排成一行 */
    white-space: pre; /* 保留空格，如果需要 */
    margin: 0; /* 移除默认外边距 */
}

.flicker-text-container span {
    /* 核心动画 */
    animation: reveal-flicker 1.5s infinite; /* 动画持续时间，无限循环 */
    opacity: 0; /* 默认隐藏 */
    /* 计算每个字符的延迟 */
    /* --i 是通过 JavaScript 或者预处理器设置的，这里我们手动模拟一下 */
    /* 实际应用中可以这样： span:nth-child(1) { --i: 1; } span:nth-child(2) { --i: 2; } */
    /* 或者用 JS 动态添加 style="--i:X;" */
    animation-delay: calc(var(--i, 0) * 0.1s); /* 每个字符延迟0.1秒出现 */
    /* 确保动画结束后保持状态 */
    animation-fill-mode: forwards;
}

/* 关键帧动画定义 */
@keyframes reveal-flicker {
    0% {
        opacity: 0; /* 开始时完全透明 */
    }
    10% {
        opacity: 1; /* 快速出现 */
    }
    15%, 25%, 35%, 45% { /* 模拟闪烁的快速变化 */
        opacity: 0;
    }
    20%, 30%, 40%, 50% {
        opacity: 1;
    }
    55% {
        opacity: 0; /* 闪烁结束后再次隐藏 */
    }
    100% {
        opacity: 0; /* 动画周期结束时保持隐藏，等待下一次循环 */
    }
}

/*
    如果想让闪烁更“硬核”，更像“分帧”效果，可以结合 steps()
    比如，让它只在两个状态间跳跃：
*/
@keyframes hard-flicker {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/*
    然后将 animation 属性修改为：
    animation: reveal-flicker 1.5s infinite, hard-flicker 0.2s steps(1, end) infinite calc(var(--i, 0) * 0.1s + 0.1s);
    但这样会同时运行两个动画，通常我们会把闪烁逻辑直接写进一个 keyframe 里。
    上面的 `reveal-flicker` 已经包含了多段 `opacity` 变化，本身就模拟了分帧。
    如果非要用 `steps()` 来控制，那通常是针对一个持续的、每帧内容都不同的动画，
    或者像下面这样，让闪烁的“开”和“关”是瞬间切换的。
*/

/* 这是一个更纯粹的，用 steps(1, end) 模拟的硬核闪烁 */
@keyframes stepped-on-off {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/*
    如果想让每个字符先出现，然后开始硬核闪烁，可以这样组合动画：
    span {
        animation: appear 0.1s forwards calc(var(--i, 0) * 0.05s),
                   stepped-on-off 0.3s steps(1, end) infinite calc(var(--i, 0) * 0.05s + 0.1s);
    }
    @keyframes appear { 0% { opacity: 0; } 100% { opacity: 1; } }
*/

<span>

style="--i:X;"

var(--i)

<span>

steps()

ease

linear

steps()

steps(1, end)

ease

linear

steps()

animation

animation-duration

1.5s

0.5s

animation-iteration-count

infinite

3

steps()

steps(1, end)

1

steps(1)

steps(2)

steps(10)

animation-delay

var(--i)

<span>

calc(var(--i, 0) * 0.1s)

--i:1

--i:2

0.1s

steps()