CSS3 implementiert den Schriftleuchteffekt (Codebeispiel)

In diesem Artikel erfahren Sie, wie Sie den Font-Glow-Effekt in CSS3 erzielen (Codebeispiel). Ich hoffe, dass er für Freunde hilfreich ist.

text-shadow

Dieses Attribut fügt dem Text einen Schatteneffekt hinzu

text-shadow: h-shadow v-shadow blur color;

h-shadow: Die Position des horizontalen Schattens (der horizontale Versatz des Schattens), Dies kann ein negativer Wert sein. Erforderlich

v-shadow: Die Position des vertikalen Schattens (der vertikale Versatz des Schattens), was ein negativer Wert sein kann

blur : Der Abstand der Schattenunschärfe (Standard ist 0), der ausgewählt werden kann

color: Schattenfarbe (Standard ist die aktuelle Schriftfarbe), optional

Auf den ersten Blick ist der Das text-shadow-Attribut wird nur zum Festlegen des Textschattens verwendet und scheint nicht möglich zu sein.

Das ist nicht der Fall. Das ist das Schöne an der Eigenschaft text-shadow.

Wenn sowohl der horizontale als auch der vertikale Versatz des Schattens 0 sind, stimmt der Schatten mit dem Text überein.

Wenn Sie zu diesem Zeitpunkt den Abstand der Schattenunschärfe vergrößern, können Sie dies erreichen Schriftart Äußerer Leuchteffekt.

Um das äußere Leuchten kühler zu machen, müssen Sie natürlich eine weitere Funktion von text-shadow verwenden: das gleichzeitige Festlegen mehrerer Schatten (verwenden Sie Kommas, um mehrere Schatten zu trennen)

Codebeispiel

HTML-Code

<p class="container">
    <p>xinpureZhu</p>
</p>

CSS-Code

body {
    background: #000;
}
.container {
    width: 600px;
    margin: 100px auto 0;
}
p {
    font-family: 'Audiowide';
    text-align: center;
    color: #00a67c;
    font-size: 7em;
    -webkit-transition: all 1.5s ease;
            transition: all 1.5s ease;
}
p:hover {
    color: #fff;
    -webkit-animation: Glow 1.5s ease infinite alternate;
            animation: Glow 1.5s ease infinite alternate;

}
@-webkit-keyframes Glow {
    from {
        text-shadow: 0 0 10px #fff,
                     0 0 20px #fff,
                     0 0 30px #fff,
                     0 0 40px #00a67c,
                     0 0 70px #00a67c,
                     0 0 80px #00a67c,
                     0 0 100px #00a67c,
                     0 0 150px #00a67c;
    }
    to {
        text-shadow: 0 0 5px #fff,
                     0 0 10px #fff,
                     0 0 15px #fff,
                     0 0 20px #00a67c,
                     0 0 35px #00a67c,
                     0 0 40px #00a67c,
                     0 0 50px #00a67c,
                     0 0 75px #00a67c;
    }
}
@keyframes Glow {
    from {
        text-shadow: 0 0 10px #fff,
                     0 0 20px #fff,
                     0 0 30px #fff,
                     0 0 40px #00a67c,
                     0 0 70px #00a67c,
                     0 0 80px #00a67c,
                     0 0 100px #00a67c,
                     0 0 150px #00a67c;
    }
    to {
        text-shadow: 0 0 5px #fff,
                     0 0 10px #fff,
                     0 0 15px #fff,
                     0 0 20px #00a67c,
                     0 0 35px #00a67c,
                     0 0 40px #00a67c,
                     0 0 50px #00a67c,
                     0 0 75px #00a67c;
    }
}

Rendering-Diagramm

Zusammenfassung: Das Obige ist das Zusammenfassung dieses Artikels Alle Inhalte, ich hoffe, dass sie für das Studium aller hilfreich sein werden. Weitere verwandte Tutorials finden Sie unter CSS3-Video-Tutorial !

Das obige ist der detaillierte Inhalt vonCSS3 implementiert den Schriftleuchteffekt (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!