如何使用 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 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告