Heim > Artikel > Web-Frontend > Wie kann man einen blinkenden Effekt für die Textanzeige nur mithilfe von CSS-Code erzielen? (Codebeispiel)

Wie kann man einen blinkenden Effekt für die Textanzeige nur mithilfe von CSS-Code erzielen? (Codebeispiel)

藏色散人Original: 2018-08-10 10:04:0111527Durchsuche

Auf Webseiten erstellen Designer normalerweise Text oder fügen einige Spezialeffekte hinzu, um ihre Produktthemen hervorzuheben, z. B. indem sie Text blinken lassen oder die Farbe regelmäßig ändern. Um den Zweck zu erreichen, Aufmerksamkeit zu erregen. Welche anderen Methoden können neben den mit PS erstellten GIF-Animationen verwendet werden, um solche Spezialeffekte zu erzielen? Für diejenigen, die sich ein wenig mit Code auskennen: Wir alle wissen, dass es in CSS viele Arten chinesischer Schriftstile gibt, z. B. kursiv, fett usw. Deshalb werde ich Ihnen hier vorstellen, wie Sie CSS-Code verwenden, um einen Text-Flash-Effekt zu erstellen. In diesem Artikel werden als Referenz zwei Flash-Methoden vorgestellt.

1. Der spezifische Beispielcode für das Flashen von CSS-Schriftarten (Wave-Flashen) lautet wie folgt:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>纯css代码测试文字闪动效果</title>
    <style>
        body{
            background: #000;
        }
        h1.fb-glitch {
            position: relative;
            color: #abff79;
        }
        h1.fb-glitch:before {
            left: -2px;
            text-shadow: 2px 0 #0b391a;
            animation: glitch-anim-2 3s infinite linear alternate-reverse;
        }
        h1.fb-glitch:before, h1.fb-glitch:after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            clip: rect(0, 0, 0, 0);
        }
        h1.fb-glitch:after {
            left: 2px;
            text-shadow: -1px 0 #1b5c16;
            animation: glitch-anim-1 2s infinite linear alternate-reverse;
        }
        @keyframes glitch-anim-1 {
            0% {
                clip: rect(82px, 820px, 98px, 0); }
            5.8823529412% {
                clip: rect(17px, 820px, 4px, 0); }
            11.7647058824% {
                clip: rect(24px, 820px, 44px, 0); }
            17.6470588235% {
                clip: rect(24px, 820px, 111px, 0); }
            23.5294117647% {
                clip: rect(29px, 820px, 45px, 0); }
            29.4117647059% {
                clip: rect(114px, 820px, 115px, 0); }
            35.2941176471% {
                clip: rect(103px, 820px, 22px, 0); }
            41.1764705882% {
                clip: rect(49px, 820px, 32px, 0); }
            47.0588235294% {
                clip: rect(2px, 820px, 10px, 0); }
            52.9411764706% {
                clip: rect(80px, 820px, 44px, 0); }
            58.8235294118% {
                clip: rect(70px, 820px, 30px, 0); }
            64.7058823529% {
                clip: rect(27px, 820px, 79px, 0); }
            70.5882352941% {
                clip: rect(82px, 820px, 112px, 0); }
            76.4705882353% {
                clip: rect(27px, 820px, 2px, 0); }
            82.3529411765% {
                clip: rect(47px, 820px, 104px, 0); }
            88.2352941176% {
                clip: rect(53px, 820px, 102px, 0); }
            94.1176470588% {
                clip: rect(2px, 820px, 90px, 0); }
            100% {
                clip: rect(88px, 820px, 56px, 0); } }

        @keyframes glitch-anim-2 {
            0% {
                clip: rect(88px, 820px, 68px, 0); }
            5.8823529412% {
                clip: rect(75px, 820px, 113px, 0); }
            11.7647058824% {
                clip: rect(80px, 820px, 40px, 0); }
            17.6470588235% {
                clip: rect(70px, 820px, 51px, 0); }
            23.5294117647% {
                clip: rect(47px, 820px, 78px, 0); }
            29.4117647059% {
                clip: rect(61px, 820px, 7px, 0); }
            35.2941176471% {
                clip: rect(94px, 820px, 1px, 0); }
            41.1764705882% {
                clip: rect(26px, 820px, 69px, 0); }
            47.0588235294% {
                clip: rect(91px, 820px, 62px, 0); }
            52.9411764706% {
                clip: rect(8px, 820px, 78px, 0); }
            58.8235294118% {
                clip: rect(17px, 820px, 97px, 0); }
            64.7058823529% {
                clip: rect(66px, 820px, 48px, 0); }
            70.5882352941% {
                clip: rect(66px, 820px, 85px, 0); }
            76.4705882353% {
                clip: rect(46px, 820px, 12px, 0); }
            82.3529411765% {
                clip: rect(69px, 820px, 68px, 0); }
            88.2352941176% {
                clip: rect(38px, 820px, 7px, 0); }
            94.1176470588% {
                clip: rect(83px, 820px, 32px, 0); }
            100% {
                clip: rect(110px, 820px, 95px, 0); } }
    </style>
</head>
<body>
<h1 class="fb-glitch" data-text="文字闪动效果">文字闪动效果</h1>
</body>
</html>

Der obige Code kann direkt kopiert und lokal getestet werden . Die Testergebnisse lauten wie folgt: Screenshot:

Wie kann man einen blinkenden Effekt für die Textanzeige nur mithilfe von CSS-Code erzielen? (Codebeispiel)

2. Der spezifische Beispielcode für das Flashen von CSS-Schriftarten ( Farbverlaufsblinken) ist wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css代码闪动效果测试</title>
</head>
<body>
<div class="main">
    文字闪动测试：<span class="blink">文字闪动效果</span>
</div>

<style type="text/css">
    .main{
        color: #666;margin-top: 50px;
    }
 @keyframes blink{
        0%{opacity: 1;}
        100%{opacity: 0;}
    }
 @-webkit-keyframes blink {
        0% { opacity: 1; }
        100% { opacity: 0; }
    }
    @-moz-keyframes blink {
        0% { opacity: 1; }
        100% { opacity: 0; }
    }
    @-ms-keyframes blink {
        0% {opacity: 1; }
        100% { opacity: 0;}
    }
    @-o-keyframes blink {
        0% { opacity: 1; }
        100% { opacity: 0; }
    }
   
 .blink{
        color: #dd4814;
        animation: blink 1s linear infinite;
 -webkit-animation: blink 1s linear infinite;
        -moz-animation: blink 1s linear infinite;
        -ms-animation: blink 1s linear infinite;
        -o-animation: blink 1s linear infinite;
    }
</style>
</body>
</html>

Der obige Code kann direkt kopiert und lokal getestet werden. Der Testeffekt ist wie folgt:

Wie kann man einen blinkenden Effekt für die Textanzeige nur mithilfe von CSS-Code erzielen? (Codebeispiel)

Hinweis: Die Hauptidee der zweiten Verlaufsmethode besteht darin, die Transparenz zu ändern. Um das Verlaufsblinken von Text zu realisieren, definiert

@keyframes blink{} die Keyframe-Animation und nennt sie blinken.

@-webkit-keyframes blink Kompatibilitätspräfix hinzufügen

.blink{}Blinkklasse definieren

-webkit-animation:;-moz-animation: ; ms-animation: -o-animation: ; Andere Browser-Kompatibilitätspräfixe

Dieser Artikel stellt zwei Methoden zum Flashen von Text vor. Ich hoffe, dass er für Freunde in Not hilfreich sein wird.

[Empfehlungen für verwandte Inhalte]

Verwenden Sie HTML, um Text-Flashing-Effektcode zu erzielen

Cooler Textsprung- und Floating-JS-Spezialeffektcode

CSS3 realisiert dreidimensionale textdynamische Texteffekte

Ideen zur Implementierung des blinkenden Prompt-Effekts eines Webseitentitels_Javascript-Fähigkeiten

Ein Beispiel für die Verwendung von reinem CSS zur Erzielung dynamischer Texteffekte

Das obige ist der detaillierte Inhalt vonWie kann man einen blinkenden Effekt für die Textanzeige nur mithilfe von CSS-Code erzielen? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie CSS und D3, um eine Zykloiden-Swing-Effekt-Animation zu erzielenNächster Artikel：So verwenden Sie CSS und D3, um eine Zykloiden-Swing-Effekt-Animation zu erzielen

In Verbindung stehende Artikel

Mehr sehen