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

Schritte zum Bereitstellen eines Spring Boot-Projekts mit Docker

Inhaltsverzeichnis Erstellen Sie ein einfaches Sp...

Über das Problem, dass die von Tomcat bereitgestellte Anwendung nicht auf die Front-End-Seite zugreifen kann

Ich habe kürzlich bei einem praktischen Trainings...

Detaillierte Erklärung der JavaScript-Timer

Inhaltsverzeichnis Kurze Einleitung Intervall fes...

Integrationspraxis des Vue+Element-Hintergrundverwaltungsframeworks

Inhaltsverzeichnis Vue+ElementUI-Hintergrundverwa...

So installieren Sie Nginx unter Win10

Da das Unternehmen mich bat, einen WebService-Ser...

Beispielcode für HTML-Layered-Box-Shadow-Effekt

Schauen wir uns zunächst das Bild an: Heute werde...

Alibaba Cloud Ubuntu 16.04 baut IPSec-Dienst auf

Einführung in IPSec IPSec (Internet Protocol Secu...

Analyse der Verwendung des MySQL-Datenbankbefehls „show processlist“

Wenn bei der tatsächlichen Projektentwicklung die...

Tomcat analysiert XML und erstellt Objekte durch Reflektion

Der folgende Beispielcode stellt die Prinzipien d...

Ubuntu-Installations-Grafiktreiber und CUDA-Tutorial

Inhaltsverzeichnis 1. Deinstallieren Sie den Orig...

Detaillierte Erläuterung des Selinux-Grundkonfigurationstutorials unter Linux

selinux ( Security-Enhanced Linux) ist ein Linux-...

Verwenden Sie Smart CSS, um Stile basierend auf der Scrollposition des Benutzers anzuwenden

Indem wir den aktuellen Bildlaufversatz zu den At...

Beheben Sie den Fehler „ExtUtils/MakeMaker.pm kann in @INC nicht gefunden werden“

Bei der Installation von mha4mysql sind die Schri...

15 Best Practices für HTML-Anfänger

Hier sind 30 Best Practices für HTML-Anfänger. 1....

Vue implementiert ein Suchfeld mit einer Lupe

In diesem Artikel erfahren Sie, wie Sie mit Vue e...