So erstellen Sie einen CSS3 verschwommenen Textverbindungs ​​-Effekt

detaillierte Erläuterung der Auswirkungen von Fuzzy -Text in CSS3 und FAQs

Schlüsselpunkte

• CSS3 kann mit transparenten Textfarben und Textschatten unscharfe Texteffekte erzeugen, aber nicht alle Browser unterstützen das Attribut text-shadow. In diesem Fall können Sie Modernizr verwenden oder benutzerdefinierte Text -Schatten -Erkennungscode als Problemumgehung schreiben.
• Für das Navigationsmenü kann ein erfreulicher Effekt erzielt werden, indem die Links reibungslos verwischt werden, während sie schweben oder fokussieren. Dies beinhaltet die Definition einer "Blur" -Klasse, die auf einen beliebigen Link angewendet werden kann und dann einen CSS -Stil verwendet, der in allen Browsern angewendet werden kann.
• Bei der Erstellung verschwommener Texteffekte achten Sie auf Probleme mit Zugänglichkeit und Sichtbarkeit. Darüber hinaus kann die Unschärfemenge durch Anpassen des dritten Textschattenattributs gesteuert werden (Definieren der Unschärfe). Es kann modifiziert werden, um den Unschärfeeffekt zu erhöhen oder zu verringern.

Folgendes ist ein Beispiel für den Textffekt, den ich auf der CSS -Trick -Website von Chris Coyier gesehen habe. Blur -Text kann in CSS3 erstellt werden, indem transparente Textfarben und Textschatten angewendet werden:

.blur-text {
  color: transparent;
  text-shadow: 0 0 5px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
}

Leider unterstützen nicht alle Browser text-shadow. IE9 und unten werden transparente Farben angewendet, aber kein Schatteneffekt - der Text wird unsichtbar. Wir müssen uns dem Modernizr zuwenden oder unseren eigenen Text -Schatten -Erkennungscode schreiben. Der folgende JavaScript -Code erhält die Klasse "textshadow" an das HTML -Element, wenn der Browser sie unterstützt. So können wir den CSS-Selektor von ".textshadow .blur-Text" verwenden, um sicherzustellen, dass er nur angewendet wird, wenn der Effekt kein schlechtes Verhalten verursacht:

if (document.createElement("detect").style.textShadow === "") {
  document.getElementsByTagName("html")[0].className += " textshadow";
}

Warnung: Opera's Fuzzy Behaviour Chrome und Firefox -Display Fuzzy -Text, sind jedoch in IE deaktiviert. Opera kann jedoch seltsam sein; Dies scheint ein Fehler zu sein, da die Anwendung der Farbe von text-shadow das Problem lösen wird. rgba(0,0,0,0)

Fuzzy Link

Mit einigen zusätzlichen CSS3 -Magie können wir die Links beim Schweben oder Fokussieren reibungslos ein- und ausschütteln lassen. Dies kann eine angenehme Wirkung für das Navigationsmenü sein. Wir werden eine "Unschärfe" -Klasse (oder "Blur in" -Klasse) definieren, die auf einen beliebigen Link angewendet werden kann. Der Link beginnt mit Blur und kehrt beim Aktivieren zum normalen Fokus zurück. In ähnlicher Weise werden wir die Klasse "verschwimmen", die den Text beim Schweben/Fokussieren verwischt, d. H.:

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">开始模糊，结束清晰</a>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">开始清晰，结束模糊</a>

Wir benötigen jetzt grundlegende CSS -Stile, die für alle Browser gelten - selbst diejenigen, die nicht

: text-shadow unterstützen

a.blur {
  text-decoration: none;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b339;
}

a.blur:hover, a.blur:focus {
  text-decoration: underline;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b933;
}

Der nächste Satz von Stilen gilt für alle

Elemente, unabhängig davon, ob sie Fokus haben oder nicht: .blur

• wir entfernen die Link -Unterstreichung und Umriss
• Stellen Sie die Textfarbe auf transparent und
ein
• Wenden Sie CSS3 -Übergänge an, die reibungslos zwischen keine Textschatten und Volltextschatten animieren. Der Effekt beginnt nach 100 Millisekunden und ist nach 400 Millisekunden abgeschlossen.

.blur-text {
  color: transparent;
  text-shadow: 0 0 5px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
}

Schließlich definieren wir zwei Textschattenzustände. Das dritte Textschattenattribut definiert die "Fuzzy -Menge". Es wird zwischen 0 und 4px animieren, aber wenn mehr oder weniger Unschärfe erforderlich ist, können Sie es ändern:

if (document.createElement("detect").style.textShadow === "") {
  document.getElementsByTagName("html")[0].className += " textshadow";
}

Die Link Fuzzy Demo -Seite anzeigen - Der Quellcode enthält alle erforderlichen CSS und JavaScript. Ich hoffe, dass Sie es nützlich finden, aber bei Verwendung dieses Effekts vorsichtiger Probleme mit Barrierefreiheit/Sichtbarkeit. Wenn Sie es woanders verwenden, würde ich gerne Ihre Kommentare erhalten und die URL veröffentlichen.

FAQs für Fuzzy -Texteffekte in CSS3

(Der FAQS -Teil wird hier weggelassen, da es zu lang ist und sich mit dem ursprünglichen Inhalt stark wiederholt. FAQs können selektiv aufbewahrt oder nach Bedarf neu organisiert und in einer prägnanteren Sprache neu geschrieben werden.)

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen CSS3 verschwommenen Textverbindungs ​​-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!