Heim >Web-Frontend >CSS-Tutorial >Wie kann man einen blinkenden Effekt für die Textanzeige nur mithilfe von CSS-Code erzielen? (Codebeispiel)
Wie kann man einen blinkenden Effekt für die Textanzeige nur mithilfe von CSS-Code erzielen? (Codebeispiel)
- 藏色散人Original
- 2018-08-10 10:04:0111585Durchsuche
Auf Webseiten erstellen Designer normalerweise Text oder fügen einige Spezialeffekte hinzu, um ihre Produktthemen hervorzuheben, z. B. indem sie Text blinken lassen oder die Farbe regelmäßig ändern. Um den Zweck zu erreichen, Aufmerksamkeit zu erregen. Welche anderen Methoden können neben den mit PS erstellten GIF-Animationen verwendet werden, um solche Spezialeffekte zu erzielen? Für diejenigen, die sich ein wenig mit Code auskennen: Wir alle wissen, dass es in CSS viele Arten chinesischer Schriftstile gibt, z. B. kursiv, fett usw. Deshalb werde ich Ihnen hier vorstellen, wie Sie CSS-Code verwenden, um einen Text-Flash-Effekt zu erstellen. In diesem Artikel werden als Referenz zwei Flash-Methoden vorgestellt.
1. Der spezifische Beispielcode für das Flashen von CSS-Schriftarten (Wave-Flashen) lautet wie folgt:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>纯css代码测试文字闪动效果</title>
<style>
body{
background: #000;
}
h1.fb-glitch {
position: relative;
color: #abff79;
}
h1.fb-glitch:before {
left: -2px;
text-shadow: 2px 0 #0b391a;
animation: glitch-anim-2 3s infinite linear alternate-reverse;
}
h1.fb-glitch:before, h1.fb-glitch:after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
clip: rect(0, 0, 0, 0);
}
h1.fb-glitch:after {
left: 2px;
text-shadow: -1px 0 #1b5c16;
animation: glitch-anim-1 2s infinite linear alternate-reverse;
}
@keyframes glitch-anim-1 {
0% {
clip: rect(82px, 820px, 98px, 0); }
5.8823529412% {
clip: rect(17px, 820px, 4px, 0); }
11.7647058824% {
clip: rect(24px, 820px, 44px, 0); }
17.6470588235% {
clip: rect(24px, 820px, 111px, 0); }
23.5294117647% {
clip: rect(29px, 820px, 45px, 0); }
29.4117647059% {
clip: rect(114px, 820px, 115px, 0); }
35.2941176471% {
clip: rect(103px, 820px, 22px, 0); }
41.1764705882% {
clip: rect(49px, 820px, 32px, 0); }
47.0588235294% {
clip: rect(2px, 820px, 10px, 0); }
52.9411764706% {
clip: rect(80px, 820px, 44px, 0); }
58.8235294118% {
clip: rect(70px, 820px, 30px, 0); }
64.7058823529% {
clip: rect(27px, 820px, 79px, 0); }
70.5882352941% {
clip: rect(82px, 820px, 112px, 0); }
76.4705882353% {
clip: rect(27px, 820px, 2px, 0); }
82.3529411765% {
clip: rect(47px, 820px, 104px, 0); }
88.2352941176% {
clip: rect(53px, 820px, 102px, 0); }
94.1176470588% {
clip: rect(2px, 820px, 90px, 0); }
100% {
clip: rect(88px, 820px, 56px, 0); } }
@keyframes glitch-anim-2 {
0% {
clip: rect(88px, 820px, 68px, 0); }
5.8823529412% {
clip: rect(75px, 820px, 113px, 0); }
11.7647058824% {
clip: rect(80px, 820px, 40px, 0); }
17.6470588235% {
clip: rect(70px, 820px, 51px, 0); }
23.5294117647% {
clip: rect(47px, 820px, 78px, 0); }
29.4117647059% {
clip: rect(61px, 820px, 7px, 0); }
35.2941176471% {
clip: rect(94px, 820px, 1px, 0); }
41.1764705882% {
clip: rect(26px, 820px, 69px, 0); }
47.0588235294% {
clip: rect(91px, 820px, 62px, 0); }
52.9411764706% {
clip: rect(8px, 820px, 78px, 0); }
58.8235294118% {
clip: rect(17px, 820px, 97px, 0); }
64.7058823529% {
clip: rect(66px, 820px, 48px, 0); }
70.5882352941% {
clip: rect(66px, 820px, 85px, 0); }
76.4705882353% {
clip: rect(46px, 820px, 12px, 0); }
82.3529411765% {
clip: rect(69px, 820px, 68px, 0); }
88.2352941176% {
clip: rect(38px, 820px, 7px, 0); }
94.1176470588% {
clip: rect(83px, 820px, 32px, 0); }
100% {
clip: rect(110px, 820px, 95px, 0); } }
</style>
</head>
<body>
<h1 class="fb-glitch" data-text="文字闪动效果">文字闪动效果</h1>
</body>
</html>Der obige Code kann direkt kopiert und lokal getestet werden . Die Testergebnisse lauten wie folgt: Screenshot:
2. Der spezifische Beispielcode für das Flashen von CSS-Schriftarten ( Farbverlaufsblinken) ist wie folgt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css代码闪动效果测试</title>
</head>
<body>
<div class="main">
文字闪动测试：<span class="blink">文字闪动效果</span>
</div>
<style type="text/css">
.main{
color: #666;margin-top: 50px;
}
@keyframes blink{
0%{opacity: 1;}
100%{opacity: 0;}
}
@-webkit-keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-ms-keyframes blink {
0% {opacity: 1; }
100% { opacity: 0;}
}
@-o-keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; }
}
.blink{
color: #dd4814;
animation: blink 1s linear infinite;
-webkit-animation: blink 1s linear infinite;
-moz-animation: blink 1s linear infinite;
-ms-animation: blink 1s linear infinite;
-o-animation: blink 1s linear infinite;
}
</style>
</body>
</html>Der obige Code kann direkt kopiert und lokal getestet werden. Der Testeffekt ist wie folgt:
Hinweis: Die Hauptidee der zweiten Verlaufsmethode besteht darin, die Transparenz zu ändern. Um das Verlaufsblinken von Text zu realisieren, definiert
@keyframes blink{} die Keyframe-Animation und nennt sie blinken.
@-webkit-keyframes blink Kompatibilitätspräfix hinzufügen
.blink{}Blinkklasse definieren
-webkit-animation:;-moz-animation: ; ms-animation: -o-animation: ; Andere Browser-Kompatibilitätspräfixe
Dieser Artikel stellt zwei Methoden zum Flashen von Text vor. Ich hoffe, dass er für Freunde in Not hilfreich sein wird.
[Empfehlungen für verwandte Inhalte]
Verwenden Sie HTML, um Text-Flashing-Effektcode zu erzielen
Cooler Textsprung- und Floating-JS-Spezialeffektcode
CSS3 realisiert dreidimensionale textdynamische Texteffekte
Ideen zur Implementierung des blinkenden Prompt-Effekts eines Webseitentitels_Javascript-Fähigkeiten
Ein Beispiel für die Verwendung von reinem CSS zur Erzielung dynamischer Texteffekte
Das obige ist der detaillierte Inhalt vonWie kann man einen blinkenden Effekt für die Textanzeige nur mithilfe von CSS-Code erzielen? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!