如何使用 CSS3 动画创建闪烁效果？

使用 CSS3 动画创建闪烁效果有很多方法。闪烁效果通常用于吸引网页上特定元素的注意力，例如警告信息、按钮或文本。CSS3 动画使您可以轻松地使用简洁且可重用的代码来实现此类效果。

创建闪烁效果的方法

使用 @keyframes 和 animation 属性

此方法将使用@keyframes 定义闪烁效果，并使用 animation 属性来设置它。@keyframes 规则描述了如何将单元的不透明度在完全可见（1）和完全隐藏（0）之间切换，以实现闪烁效果。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Blinking Effect</title>
    <style>
        .blink {
            color: red;
            font-size: 24px;
            font-weight: bold;
            animation: blink-animation 1s steps(1, start) infinite;
        }

        @keyframes blink-animation {
            50% {
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="blink">Blinking Text</div>
</body>
</html>

输出

Blinking Effect

使用 animation 和 visibility

此方法切换visibility 属性，而不是 opacity。visibility 属性将元素从视图中移除，但仍在布局中占据空间。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Blinking Effect</title>
    <style>
    .blink {
        color: blue;
        font-weight: 1000;
        font-size: 40px;
        animation: visibility-animation 0.01s infinite;
    }

    @keyframes visibility-animation {
        50% {
            visibility: hidden;
        }
    }
    </style>
</head>
<body>
    <div class="blink">Flashing Visibility</div>
</body>
</html>

输出

Blinking Effect

使用 animation 和 opacity

另一种使用渐进淡入淡出的@keyframes 模式。opacity 会平滑过渡，而不是在值之间突然切换。

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Blinking Effect</title>
    <style>
        .blink {
            font-size: 40px;
            color: green;
            animation: smooth-blink 2s infinite;
        }

        @keyframes smooth-blink {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.1;
            }
        }
    </style>
</head>

<body>
    <div class="blink">Flashing Visibility</div>
</body>

</html>

输出

Blinking Effect

使用 CSS Transitions（控制有限）

这是一种简单的方法，灵活性较低，因为transitions 是一次性效果。Transitions 需要使用 JavaScript 或悬停状态来触发效果。

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Blinking Effect</title>
    style>
        .blink {
            font-size: 40px;
            color: purple;
            transition: opacity 0.5s ease-in-out;
        }

        .blink:hover {
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="blink">Hover to Blink</div>
</body>

</html>

输出

Blinking Effect

更新于：2024-11-22

4 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告