So erstellen Sie leuchtende Links in CSS3

Dieser Artikel zeigt, dass animierte leuchtende Links mit CSS3 erstellt werden. Während ein früherer Artikel Text-Shadow und transparentes Text für einen Unschärfeeffekt verwendete, nutzt dieser eine Textschatten, um einen leuchtenden Effekt auf Schwebedämpfer oder Fokus zu erzielen. IE9-Benutzer benötigen einen neueren Browser, da es keine Text-Shadow-Unterstützung hat.

Der Effekt wird mit einer Kombination aus Text-Shadow- und CSS3-Übergängen erreicht. Untersuchen wir den Code.

Zunächst wird der HTML: Ein einfacher Link mit der Klasse "Glow" verwendet:

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="glow">Glowing Link</a>

Das CSS beginnt mit der Definition der Ausgangszustands- und Übergangseigenschaften. Der Übergang ist auf 500 ms mit linearem Timing für einen reibungslosen Effekt eingestellt. Anbieterpräfixe sind für die Kompatibilität der breiten Browser enthalten:

a.glow, a.glow:hover, a.glow:focus {
    text-decoration: none;
    color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15baaf;
    text-shadow: none;
    -webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;
    outline: 0 none;
}

Als nächstes wird der leuchtende Effekt für den Schwebe- und Fokuszustand definiert. Zwei Textschatten, ein Weiß und ein Gelb, werden für einen ausgeprägteren Effekt verwendet:

a.glow:hover, a.glow:focus {
    color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
    text-shadow: -1px 1px 8px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffc, 1px -1px 8px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
}

Eine Demonstrationsseite (Link zur Sicherheit weggelassen) zeigt den Effekt. Experimentieren Sie mit verschiedenen text-shadow und Übergangseigenschaften, um die Animation anzupassen.

Browserkompatibilitätsnotizen:

Der Effekt funktioniert gut in modernen Browsern (Firefox, Chrome, Safari). IE9 fehlt die Unterstützung von Textschatten. Opera unterstützt Übergänge, kann sie jedoch möglicherweise nicht konsequent auf Textschatten anwenden, was zu einer weniger reibungslosen Animation führt.

Ein zweiter Satz von Links in der Demo verwendet einen Back-Lit-Effekt (die Textfarbe für den Hintergrund ändern). Dies macht den Text jedoch in älteren IE-Versionen unsichtbar. Modernizr oder ein Text-Shadow-Erkennungsskript (Beispiel unten) kann dies ansprechen:

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

Diese Technik bietet eine einfache und dennoch effektive Möglichkeit, Links visuelles Interesse zu verleihen. Fühlen Sie sich frei, Ihre Kreationen zu teilen!

häufig gestellte Fragen (FAQs) werden aufgrund von Längenbeschränkungen weggelassen, aber der ursprüngliche Text liefert umfassende Antworten.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie leuchtende Links in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!