Drei Möglichkeiten, um einen Textblinkeffekt im CSS3-Beispielcode zu erzielen

Drei Möglichkeiten, um einen Textblinkeffekt im CSS3-Beispielcode zu erzielen

1. Ändern Sie die Transparenz, um ein allmähliches Aufblinken des Textes zu erreichen. Der Effekt ist wie folgt: 

<!DOCTYPE html>
<html>
<Kopf>
</Kopf>
<title>Text blinkt</title>
<Text>
<div Klasse="blinken">
Ein einziger Funke kann einen Präriebrand auslösen</div>
</body>
<Stil>
.meineKlasse{
    	letter-spacing:5px;/*Wortabstand*/
    	Farbe: rot;
    	Schriftstärke: fett;
    	Schriftgröße: 46px;
    }
	
/* Keyframe-Animation definieren, mit dem Namen „Blinken“ */
@keyframes blink{
  0 % {Deckkraft: 1;}
     
  100 % {Deckkraft: 0;} 
}
/* Kompatibilitätspräfix hinzufügen */
@-webkit-keyframes blink {
    0 % { Deckkraft: 1; }
    100 % { Deckkraft: 0; }
}
@-moz-keyframes blink {
    0 % { Deckkraft: 1; }
    100 % { Deckkraft: 0; }
}
@-ms-keyframes blink {
    0 % {Deckkraft: 1; } 
    100 % { Deckkraft: 0;}
}
@-o-keyframes blink {
    0 % { Deckkraft: 1; }
    100 % { Deckkraft: 0; }
}
/* Definiere die Blinkklasse */
.blinken{
	Farbe: rot;
	Schriftgröße: 46px;
    Animation: 1 s lang linear und unendlich blinkend;  
    /* Andere Browserkompatibilitätspräfixe*/
    -webkit-animation: 1 s linear unendlich blinken;
    -moz-animation: 1 s linear unendlich blinken;
    -ms-Animation: 1 s linear unendlich blinken;
    -o-Animation: 1 s linear unendlich blinken;
}
<Stil>
</html>

Wenn wir keinen allmählichen Blinkeffekt benötigen, können wir in der Keyframe-Animation Deckkraftwerte von 50 % und 50,1 % definieren. wie folgt: 

    @-webkit-keyframes blink {
        0 % { Deckkraft: 1; }
        50 % { Deckkraft: 1; }
        50,01 % { Deckkraft: 0; }
        100 % { Deckkraft: 0; }
    }

2. Verwenden Sie Hintergrundbilder oder Hintergrundverläufe, um einen blinkenden Effekt auf der Textfarbe zu erzielen. Rendering: 

<!DOCTYPE html>  
<html>  
    <Kopf>  
        <meta charset="UTF-8">  
        <Titel></Titel>  
        <style type="text/css">  
        .blinken{ 
    	Anzeige: Inline-Block;
    	Schriftgröße: 46px;
    	Rand: 10px;
    	Hintergrund: linearer Farbverlauf (links, #f71605, #e0f513); 
        Hintergrund: -webkit-linear-gradient(links, #f71605, #e0f513);
        Hintergrund: -o-linear-gradient (rechts, #f71605, #e0f513);
		-webkit-background-clip: Text;
		-webkit-text-fill-color: transparent;
		Animation: kratzig, 0,253 s, linear vorwärts, unendlich;
		/* Andere Browserkompatibilitätspräfixe*/
	    -webkit-animation:scratchy 0,253 s linear vorwärts unendlich;
	    -moz-animation: kratzig 0,253 s linear vorwärts unendlich;
	    -ms-Animation: kratzig 0,253 s linear vorwärts unendlich;
	    -o-Animation: kratzig 0,253 s linear vorwärts unendlich;
    }  
   @keyframes kratzig {
		0% {
			Hintergrundposition: 0 0;
		}
		25 % {
			Hintergrundposition: 0 0;
		}
		26% {
			Hintergrundposition: 20px -20px;
		}
		50 % {
			Hintergrundposition: 20px -20px;
		}
		51 % {
			Hintergrundposition: 40px -40px;
		}
		75 % {
			Hintergrundposition: 40px -40px;
		}
		76 % {
			Hintergrundposition: 60px -60px;
		}
		99% {
			Hintergrundposition: 60px -60px;
		}
		100 % {
			Hintergrundposition: 0 0;
		}
	}
	/* Kompatibilitätspräfix hinzufügen */
	@-webkit-keyframes kratzig {
	    0% {
			Hintergrundposition: 0 0;
		}
		25 % {
			Hintergrundposition: 0 0;
		}
		26% {
			Hintergrundposition: 20px -20px;
		}
		50 % {
			Hintergrundposition: 20px -20px;
		}
		51 % {
			Hintergrundposition: 40px -40px;
		}
		75 % {
			Hintergrundposition: 40px -40px;
		}
		76 % {
			Hintergrundposition: 60px -60px;
		}
		99% {
			Hintergrundposition: 60px -60px;
		}
		100 % {
			Hintergrundposition: 0 0;
		}
	}
	@-moz-keyframes kratzig {
	    0% {
			Hintergrundposition: 0 0;
		}
		25 % {
			Hintergrundposition: 0 0;
		}
		26% {
			Hintergrundposition: 20px -20px;
		}
		50 % {
			Hintergrundposition: 20px -20px;
		}
		51 % {
			Hintergrundposition: 40px -40px;
		}
		75 % {
			Hintergrundposition: 40px -40px;
		}
		76 % {
			Hintergrundposition: 60px -60px;
		}
		99% {
			Hintergrundposition: 60px -60px;
		}
		100 % {
			Hintergrundposition: 0 0;
		}
	}
	@-ms-keyframes kratzig {
	   0% {
			Hintergrundposition: 0 0;
		}
		25 % {
			Hintergrundposition: 0 0;
		}
		26% {
			Hintergrundposition: 20px -20px;
		}
		50 % {
			Hintergrundposition: 20px -20px;
		}
		51 % {
			Hintergrundposition: 40px -40px;
		}
		75 % {
			Hintergrundposition: 40px -40px;
		}
		76 % {
			Hintergrundposition: 60px -60px;
		}
		99% {
			Hintergrundposition: 60px -60px;
		}
		100 % {
			Hintergrundposition: 0 0;
		}
	}
	@-o-keyframes kratzig {
	   0% {
			Hintergrundposition: 0 0;
		}
		25 % {
			Hintergrundposition: 0 0;
		}
		26% {
			Hintergrundposition: 20px -20px;
		}
		50 % {
			Hintergrundposition: 20px -20px;
		}
		51 % {
			Hintergrundposition: 40px -40px;
		}
		75 % {
			Hintergrundposition: 40px -40px;
		}
		76 % {
			Hintergrundposition: 60px -60px;
		}
		99% {
			Hintergrundposition: 60px -60px;
		}
		100 % {
			Hintergrundposition: 0 0;
		}
	}
    </Stil>  
    </Kopf>  
    <Text>  
        <div class="blink">Ein einziger Funke kann einen Präriebrand auslösen</div>
    </body>  
</html>

3. Durch Festlegen des Werts für Textschatten können Sie den Effekt des blinkenden Textschattens erzielen, wie im Effektdiagramm dargestellt: 

<!DOCTYPE html>  
<html>  
    <Kopf>  
        <meta charset="UTF-8">  
        <Titel></Titel>  
        <style type="text/css">  
        .blinken{ 
    	Schriftgröße: 46px; 
    	Farbe: #4cc134; 
    	Rand: 10px;
    	Animation: Changeshadow 1s Ease-In unendlich;
    	/* Andere Browserkompatibilitätspräfixe*/
	    -webkit-animation: changeshadow 1s linear unendlich;
	    -moz-animation: changeshadow 1s linear unendlich;
	    -ms-animation: changeshadow 1s linear unendlich;
	    -o-Animation: Changeshadow 1s linear unendlich;
    }  
    @keyframes changeshadow {  
        0 % { Textschatten: 0 0 4px #4cc134}  
        50 % {Textschatten: 0 0 40px #4cc134}  
        100 % {Textschatten: 0 0 4px #4cc134}  
    }
    /* Kompatibilitätspräfix hinzufügen */
	@-webkit-keyframes changeshadow {
	  0 % { Textschatten: 0 0 4px #4cc134}  
          50 % {Textschatten: 0 0 40px #4cc134}  
          100 % {Textschatten: 0 0 4px #4cc134}  
	}
	@-moz-keyframes changeshadow {
	    0 % { Textschatten: 0 0 4px #4cc134}  
            50 % {Textschatten: 0 0 40px #4cc134}  
            100 % {Textschatten: 0 0 4px #4cc134}  
	}
	@-ms-keyframes changeshadow {
	    0 % { Textschatten: 0 0 4px #4cc134}  
            50 % {Textschatten: 0 0 40px #4cc134}  
            100 % {Textschatten: 0 0 4px #4cc134}  
	}
	@-o-keyframes changeshadow {
	    0 % { Textschatten: 0 0 4px #4cc134}  
            50 % {Textschatten: 0 0 40px #4cc134}  
            100 % {Textschatten: 0 0 4px #4cc134}  
	}
    </Stil>  
    </Kopf>  
    <Text>  
        <div class="blink">Ein einziger Funke kann einen Präriebrand auslösen</div>
    </body>  
</html>

Dank an den Blog: https://blog.csdn.net/art_people/article/details/104768666/

Damit ist dieser Artikel über drei Möglichkeiten zum Erzielen von Textblinkeffekten mit CSS3 und Beispielcodes abgeschlossen. Weitere relevante CSS3-Textblinkinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Lösung für den ineffektiven Rand von in HTML verschachtelten Divs

>>:  Detaillierte Erklärung der Set-Datenstruktur von JavaScript

Artikel empfehlen

Detaillierte Erläuterung der Implementierung der Titelwiedergabe im WeChat-Applet und der aufgetretenen Fallstricke

Bei der Flugbahnwiedergabe des WeChat-Applets wer...

Detaillierte Erklärung der Bildlaufleisten-Bildlaufsteuerung von DOM-Elementen in HTML

Ich weiß nicht, ob Sie schon einmal auf eine solc...

Detaillierte Erläuterung des Beispiels der Caching-Methode von Vue

Kürzlich wurde die neue Anforderung „Front-End-Ca...

Tutorial zur Installation und Konfiguration von MySQL 8.0.12 unter Win10

Installation, Konfiguration, Start, Anmeldung und...

Eine kurze Erläuterung der Größeneinheiten in CSS

Die Kompatibilität der Browser wird immer besser....

Tutorial zum Erstellen eines Zookeeper-Servers unter Windows

Installation und Konfiguration Die offizielle Web...

Implementierung von Kennwortfeld-Verifizierungsinformationen basierend auf JavaScript

In diesem Artikelbeispiel wird der spezifische Ja...

Vergleich der Effizienz der Dateneinfügung in MySQL

Beim Einfügen von Daten stellte ich fest, dass ic...

Eine kurze Diskussion über Front-End-Netzwerk, JavaScript-Optimierung und Entwicklungstipps

1. Netzwerkoptimierung YSlow hat 23 Regeln. Diese...

Mehrere Möglichkeiten, das Problem des Schwebens zu lösen, das dazu führt, dass die Höhe des übergeordneten Elements in CSS zusammenbricht

In der Vergangenheit wurde Float häufig für das L...

Detaillierte Erklärung zur passiven Überprüfung des Überlebensstatus des Servers durch Nginx

einführen Überwacht die Integrität von HTTP-Serve...

So laden Sie Projekte im Linux-System in die Code Cloud hoch

Erstellen Sie ein neues Projekt test1 auf Code Cl...

Verschiedene korrekte Haltungen zur Verwendung von Umgebungsvariablen in Webpack

Inhaltsverzeichnis Schreiben Sie vor Geschäftscod...

Zusammenfassung der Verwendung von MySQL Online DDL gh-ost

Hintergrund: Als DBA werden die meisten DDL-Änder...

Beispiel für die Installation und Bereitstellung von Docker unter Linux

Nachdem Sie den folgenden Artikel gelesen haben, ...