Lassen Sie einen Text mit CSS und JavaScript blinken
- Blinktext in HTML
- Lassen Sie einen Text mit internem oder eingebettetem CSS blinken
- Lassen Sie einen Text mit Inline-CSS blinken
- Lassen Sie einen Text mit externem CSS blinken
- Lassen Sie einen Text mit JavaScript blinken
- Lassen Sie einen Text mit JQuery blinken
- Erstellen Sie mit JavaScript einen blinkenden Text in mehreren Abschnitten einer Seite
- Erstellen Sie einen alternativen blinkenden Text mit CSS
In diesem Artikel wird der Blink/Flash-Text ausführlich behandelt. Wir werden seinen Zweck und seine Vorteile sehen.
Wir lernen zahlreiche Strategien und Techniken kennen, um blinkenden Text auf unserer Website zu implementieren. Um Blinktext zu implementieren, untersuchen wir internes CSS, Inline-CSS, externes CSS, JavaScript und jQuery.
Blinktext in HTML
Blinktext ist die Art von Text, der blinkt. Auf Shopping-Websites sehen Sie möglicherweise ein blinkendes Verkaufssymbol oder ein neues Kollektionsbanner in einem blinkenden Stil.
Es ist eine effektive Strategie, um die Aufmerksamkeit der Benutzer zu gewinnen. HTML bietet für diese Funktion das Tag <blink> an; Browser unterstützen es jedoch nicht mehr, was es zu einem veralteten Tag macht.
Lassen Sie uns verschiedene Methoden untersuchen, um diese Funktionalität ohne Verwendung des Tags zu erreichen.
Lassen Sie einen Text mit internem oder eingebettetem CSS blinken
Internes CSS ist im HTML-Tag style enthalten. In das Tag können wir jede CSS-Eigenschaft aufnehmen.
Sehen Sie sich den folgenden Code an, um zu erfahren, wie wir internes CSS verwendet haben, um den blinkenden Text zu erstellen.
<html>
<head>
<style>
.blink {
animation: blinker 1s linear infinite;
}
@keyframes blinker
{
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="blink">Internal CSS Blink !</div>
</body>
</html>
Dies ist einer der einfachsten Ansätze, um einen Text zum Blinken zu bringen. Wir haben nur ein wenig gestylt, und die Arbeit ist getan.
Einige der CSS-Begriffe sind vielleicht neu für Sie, aber keine Sorge, lassen Sie uns im Detail sehen, was jeder der Begriffe bedeutet.
die Eigenschaft animation
Wir haben die Eigenschaft animation von CSS für die Klasse blink verwendet, um Animationen anzuwenden. Die Eigenschaft animation ist eine Abkürzung für:
animation-name |
Geben Sie einen Namen für die Animation an. |
animation-duration |
Es definiert, wie lange eine Animation für einen Zyklus benötigen soll. |
animation-timing-function |
Geben Sie die Geschwindigkeitskurve vom Anfang bis zum Ende einer Animation an. |
animation-delay |
Geben Sie eine Wartezeit für den Start einer Animation an. |
animation-iteration-count |
Geben Sie an, wie oft eine Animation abgespielt werden soll. |
animation-direction |
Geben Sie die Richtung der Animation an, d. h. vorwärts, rückwärts oder abwechselnd vor und zurück. |
animation-fill-mode |
Geben Sie an, wie CSS-Animationen Stile vor und nach der Ausführung auf ihre Ziele anwenden. |
animation-play-state |
Geben Sie an, ob die Animation ausgeführt oder angehalten wird. |
Lassen Sie uns nun verstehen, was wir in unseren Code geschrieben haben. Die animation im obigen Code enthält die folgenden Eigenschaften:
- Der
blinkerist ein Animationsname. - Die
1sist dieAnimationsdauer, was bedeutet, dass jeder Zyklus nach 1 Sekunde abgeschlossen ist. linearist dieAnimations-Timing-Funktion, was bedeutet, dass die Animation von Anfang bis Ende mit der gleichen Geschwindigkeit abgespielt wird.Unendlichist dieAnimations-Iterations-Anzahl, was bedeutet, dass die Animation unbegrenzt oft abgespielt wird.
Um die gesamten Informationen zusammenzufassen, kamen wir zu dem Schluss, dass die Animation blinker jeden Zyklus in einer Sekunde mit der gleichen Geschwindigkeit unendlich oft durchlaufen würde.
Keyframes
In CSS definieren die @keyframes die Animationsregel. Veränderbare CSS-Stile werden verwendet, um Animationen zu erstellen.
Während einer Animation können mehrere CSS-Eigenschaftsänderungen auftreten. Wir müssen feststellen, wann eine Stiländerung in Prozenten auftritt oder die Ausdrücke von und bis enthält, was 0 % und 100 % entspricht; 0 % bezeichnet den Beginn und 100 % den Abschluss.
Geben Sie für die beste Browserunterstützung immer die 0 %- und die 100 %-Selektoren an. Wir werden es später im Artikel sehen.
Die CSS-Syntax der Keyframes lautet:
@keyframes animation-name {*keyframes-selector* {*css-styles;}*}
Schauen wir uns an, was wir in unserem Code gemacht haben.
Wir setzen Keyframes auf unsere Animation blinker und geben an, dass die Deckkraft bei 50% Null sein soll. Die Transparenz eines Elements wird über die Eigenschaft opacity eingestellt.
Der Wert für die Eigenschaft opacity muss strikt zwischen 0 und 1 liegen.
CSS-Anbieterpräfixe
Ein eindeutiges Präfix, das einer CSS-Eigenschaft hinzugefügt wird, wird als Anbieterpräfix bezeichnet. Es gibt mehrere CSS-Eigenschaften, die ältere Browserversionen nicht unterstützen, daher müssen Sie ein Browserpräfix verwenden, um diese Tags zu unterstützen.
Es gibt ein Präfix für jede Rendering-Engine, die das Attribut nur auf diesen bestimmten Browser anwendet.
- Internet Explorer, Microsoft Edge:
-ms- - Chrome, Safari, iOS, Android:
-webkit- - Firefox:
-moz- - Oper:
-o-
Lassen Sie uns den oben beschriebenen Code umschreiben, damit er mit so vielen Browsern wie möglich funktioniert.
<html>
<head>
<style>
.blink {
-webkit-animation: blinker 1s linear infinite;
-moz-animation: blinker 1s linear infinite;
-ms-animation: blinker 1s linear infinite;
-o-animation: blinker 1s linear infinite;
animation: blinker 1s linear infinite;
}
@-webkit-keyframes 'blinker' {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes 'blinker' {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes 'blinker' {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes 'blinker' {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes 'blinker' {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="blink">Hello Blinking World!</div>
</body>
</html>
Lassen Sie einen Text mit Inline-CSS blinken
Mit Inline-CSS können Sie das Styling direkt in die HTML-Elemente einfügen. Obwohl es gut zu wissen ist, ist Inline-CSS keine empfehlenswerte Option, da es elementabhängig und daher nicht wiederverwendbar ist.
Außerdem können wir nicht alle Eigenschaften und Funktionen von CSS im Inline-Styling verwenden. Apropos aktuelles Szenario mit blinkendem Text: Wir können keine Keyframes in Inline-CSS verwenden, da Keyframes nicht Teil der HTML-Elemente sind.
Sehen wir uns an, wie man einen Text mit Inline-CSS flasht.
<html>
<head>
<style>
@-webkit-keyframes 'blinker' {
50% {
opacity: 0;
}
}
@-moz-keyframes 'blinker' {
50% {
opacity: 0;
}
}
@-o-keyframes 'blinker' {
50% {
opacity: 0;
}
}
@-ms-keyframes 'blinker' {
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="blink" style="animation: blinker 1s linear infinite">
In-line CSS Blink !
</div>
</body>
</html>
Lassen Sie einen Text mit externem CSS blinken
Externes CSS ist die Möglichkeit, unserer HTML-Datei eine CSS-Datei hinzuzufügen. Es ist eine hervorragende Praxis, Styling und Elemente getrennt zu halten.
Sie können die CSS-Datei hinzufügen, indem Sie das Tag link verwenden. Erstellen Sie eine CSS-Datei mit dem Namen style.css, kopieren Sie den Code im Tag style aus dem obigen Code und fügen Sie ihn der HTML-Datei hinzu. Hier ist wie.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="blink">Hello Blinking World!</div>
</body>
</html>
Lassen Sie einen Text mit JavaScript blinken
JavaScript war schon immer ein Lebensretter bei der Ausführung fast aller Funktionen. Es bietet verschiedene Methoden und Techniken, um erstaunliche Dinge sehr schnell zu tun.
Lassen Sie uns sehen, wie man einen Text mit JavaScript zum Blinken bringt.
<html>
<head>
<script>
var blink_speed = 300;
setInterval(function(){
var element = document.getElementById("blink");
element.style.display = element.style.display == 'none'?'':'none';
}, blink_speed);
</script>
</head>
<body>
<div id="blink">Javascript Blink !</div>
</body>
</html>
Lassen Sie uns den JavaScript-Code hier verstehen. Welche Magie tut es?
Zuerst initialisieren wir eine Variable mit dem Namen blink_speed und weisen ihr den Wert zu; Sie können einen beliebigen Wert Ihrer Wahl festlegen. Wenn Sie 1000 geben, bedeutet dies 1 Sekunde, 2000 Punkte 2 Sekunden und so weiter.
Wir weisen 300 in unserem Code zu, was bedeutet, dass es weniger als 1 Sekunde dauert.
Zweitens verwenden wir die setInterval-Funktion von JavaScript. Die Methode setInterval ruft die Funktion weiterhin in bestimmten Intervallen (in Millisekunden) auf.
Hier ist die Syntax der Funktion:
setInterval(function, milliseconds)
Der Funktion-Parameter ist die wiederholt in festgelegten Intervallen auszuführende Anweisung. Der Parameter Millisekunde erhält die Geschwindigkeit für die Ausführungsintervalle.
In unserem Code ruft der function-Parameter von setInterval zuerst das Element nach ID-Name ab. Nachdem wir das erforderliche Element erhalten haben, überprüfen wir mit dem ternären Operator, dass, wenn die Anzeige unseres Elements none ist, es angezeigt wird und umgekehrt.
Dann haben wir dem zweiten Parameter der Funktion setInterval die blink_speed zugewiesen.
Lassen Sie einen Text mit JQuery blinken
jQuery ist eine JavaScript-Bibliothek, deren Zweck es ist, JavaScript so einfach wie möglich zu machen. Mal sehen, wie man mit jQuery blinkenden Text erstellt.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function blinkText(element){
$(element).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blinkText(this);
});
});
}
$(function() {
blinkText('#blink');
});
</script>
</head>
<body>
<div id="blink">JQuery Blink !</div>
</body>
</html>
Das ist ziemlich einfach. Mal sehen, was der Code macht.
Da jQuery eine JavaScript-Bibliothek ist, müssen wir ihre Referenz in unseren Code einfügen, um sie zu verwenden. Im Code haben wir eine einfache Funktion blinkText erstellt, die ein HTML-Element erhält.
Zuerst rufen wir die Funktion fadeOut für das Element auf, und dann rufen wir innerhalb dieser Funktion eine andere Funktion, fadeIn, darauf auf. Innerhalb von fadeIn rufen wir unsere Funktion rekursiv auf, da wir möchten, dass sie unendlich oft blinkenden Text anzeigt.
Abschließend wird der Text ausgeblendet, eingeblendet, ausgeblendet, eingeblendet und so weiter, da es sich um einen nie endenden rekursiven Aufruf handelt.
Erstellen Sie mit JavaScript einen blinkenden Text in mehreren Abschnitten einer Seite
Lassen Sie uns eine spannende Aufgabe erledigen. Wir möchten blinkenden Text in mehreren Bereichen einer Seite erstellen.
Mit CSS geht das ganz einfach. Weisen Sie allen Elementen, die Sie zum Blinken bringen möchten, dieselbe Klasse zu, und es wird erledigt.
Aber wie macht man das mit JavaScript? Wie wir im obigen Code gesehen haben, wählt JavaScript nur ein Element aus.
Lassen Sie uns herausfinden, wie wir dies erreichen können.
<html>
<head>
<script>
function blinkText()
{
var elements = document.getElementsByClassName("blink");
for(var i = 0, l = elements.length; i < l; i++)
{
var blink = elements[i];
blink.style.display = blink.style.display == 'none' ? '' : 'none';
}
}
setInterval(blinkText, 300);
</script>
</head>
<body>
<div class="blink">Hello</div>
<div class="blink">World</div>
</body>
</html>
Wenn wir viele Elemente mit demselben Klassennamen haben, gibt document.getElementByClassname ein Array aller Elemente zurück. Wir durchlaufen dann jedes Element einzeln und erledigen die Aufgabe.
Erstellen Sie einen alternativen blinkenden Text mit CSS
Lassen Sie uns nun eine weitere fantastische Animation erstellen, um ein alternatives Wort mit blinkendem Text nur mit CSS zu erstellen.
<html>
<head>
<style>
.blink::before {
content: "Welcome";
animation: blinker 1s linear infinite alternate;
}
@keyframes blinker {
0% {
content: "Welcome";
}
50% {
opacity: 0%;
}
100% {
content: "Developer";
}
}
</style>
</head>
<body>
<div class="blink"></div>
</body>
</html>
Es wird zunächst Willkommen anzeigen, dann blinken und dann Entwickler sagen. Diese Schleife wiederholt sich kontinuierlich.