Beispiel für die Verwendung von CSS3 zum Erzielen eines glänzenden Schrifteffekts beim Entsperren eines Apple-Telefons
0. Einleitung18. August 2016 Heute ist mir aufgefallen, dass beim Gleiten des iPhones zum Entsperren ein weißes Licht auf dem Eingabeaufforderungstext blinkt, was sehr cool ist. Also kam ich plötzlich auf die Idee, einen Effekt zu erstellen, bei dem ein weißes Licht blinkt und den Text beleuchtet, wenn die Maus auf den Text gelegt wird (was einen Finger simuliert).
1. IdeeZunächst muss ein schräg einfallendes weißes Licht erzeugt werden, mit dem der Effekt der „Beleuchtung der Schrift“ erzielt wird.
Nach Abschluss dieses Schrittes ist das nächste Vorgehen ganz einfach: Lassen Sie zunächst das weiße Licht verschwinden. Wenn Sie dann mit der Maus über die Schrift fahren, erscheint das weiße Licht und läuft über die Schrift. 2. Erzeugung von weißem Licht Wie Sie auf dem Bild oben sehen können, wechselt der Rand des weißen Lichts nicht direkt von Weiß zu Schwarz, sondern wechselt allmählich zu Schwarz. Wenn wir dieses weiße Licht erzeugen, müssen wir daher den Farbverlauf in CSS verwenden. Produktionsprozess Zuerst erstellen wir ein Div und legen einen einfachen zentrierten Standardstil fest. Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
Körper{
Rand: 0;
}
div{
Breite: 700px;
Höhe: 200px;
Rand: 1px tief schwarz;
Rand: 0 automatisch;
}
</Stil>
</Kopf>
<Text>
<div></div>
</body>
</html>Laufergebnisse:
2. Stellen Sie den Farbverlauf ein.Stellen Sie einen Farbverlauf von „schwarz->weiß->schwarz“ mit einem bestimmten Neigungswinkel ein. Code: Hintergrund: -webkit-linear-gradient(-45deg, #000 100px, #FFF 140px, #FFF 220px, #000 260px); /*Der Winkel ist auf -45° eingestellt*/ An diesem Punkt ist das laufende Ergebnis:
Darüber hinaus wird der Startwinkel des Gradienten wie folgt erklärt: 1. Wenn Verlaufsrichtung und -winkel nicht festgelegt sind, verläuft der Standardverlauf von oben nach unten. Daher ändert es sich allmählich von der oberen linken Ecke zur unteren rechten Ecke. 3. Festlegen des Hintergrundtextes An dieser Stelle stellen sich für manche möglicherweise Fragen: Warum muss über das Festlegen des Hintergrundtextes gesondert gesprochen werden? Denn hier lauert eine subtile Falle! Um was es sich dabei konkret handelt, erkläre ich hier nicht, werde euch die konkreten Phänomene aber später vorstellen. Hier stellen wir zunächst allgemein die Schriftart ein. Schriftgröße: 50px; Textausrichtung: zentriert; Zeilenhöhe: 200px; Farbe: weiß; /*Der festgelegte Text lautet: La la la la la la la la Demacia! ! */ 4. Gleiteffekt von weißem Licht Dazu gibt es nicht viel zu sagen. Lasse zuerst das weiße Licht verschwinden. Wenn die Maus auf das Div gesetzt wird, erscheint das weiße Licht und bewegt sich dann hinüber. Direkt: Hintergrundposition: -1000px,0px; Wirkung:
Äh...äh, was ist los? ? Nun, der Hintergrund wiederholt sich. Stellen Sie hier unbedingt background-repeat: no-repeat ein; (Hinweis: Die Schrift ist weiß, daher wird der Text vorerst nicht angezeigt) So legen Sie eine dynamische Pseudoklasse fest:
div:hover{
Hintergrundposition: 1000px,0px;
Übergang: alle 5 s;
}Für den Effekt setzen wir die Hintergrundfarbe des gesamten Körpers auf Schwarz. Der Effekt besteht darin, dass, wenn die Maus nicht auf das Div bewegt wird, nur der Text angezeigt wird. Wenn die Maus auf dem Div platziert wird, geht ein weißes Licht vorbei.
3.Hintergrund-Clip: TextDas weiße Licht war fertig, aber es war nicht ganz so, wie wir es uns vorgestellt hatten. Wissen Sie, wir möchten den Text beleuchten und nicht, dass er wie ein Laser über Sie hinwegsaust. Daher müssen wir dieses Mal ein Tag verwenden: Die Bedeutung dieses Tags ist: Alle Hintergründe außer Text können entfernt werden. Dadurch erzielen wir unseren Effekt. Beachten Sie jedoch, dass dieses Tag bei Verwendung mit einem Browserpräfix hinzugefügt werden muss, da viele Browser es ohne das Browserpräfix nicht erkennen können. Schauen Sie sich einfach die Ergebnisse an.
Was? ! Warum gibt es keinen Effekt? Wo ist mein weißes Licht? Sie werden feststellen, dass nichts passiert, wenn Sie die Maus darüber bewegen. Das Phänomen des weißen Lichtblinkens ist verschwunden! Ist es wirklich weg? Natürlich nicht, das weiße Licht existiert hier tatsächlich, es wird nur durch den Text blockiert. Erinnern Sie sich, warum ich den Einstellungstext zuvor separat erwähnt habe? Denn wenn man nur die Farbe des Textes festlegt, funktioniert es nicht. Wir müssen dem Text Transparenz verleihen, damit das weiße Licht des Hintergrunds durch den Text hindurchscheinen kann. Dieses Mal sollten wir die RGBA-Methode verwenden, um die Farbe des Textes festzulegen und dem Text ein gewisses Maß an Transparenz zu verleihen. Auf diese Weise wird der gewünschte Effekt der Beleuchtung der Schrift erzielt. ( ^__^ )
Der Gesamtcode ist unten angehängt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
Körper{
Rand: 0;
Hintergrund: #000;
}
div{
Breite: 1000px;
Höhe: 200px;
Rand: 1px tief schwarz;
Rand: 0 automatisch;
Schriftgröße: 70px;
Textausrichtung: zentriert;
Zeilenhöhe: 200px;
Farbe: rgba(255,255,255,1);
Hintergrund: -webkit-linear-gradient(-45deg,
#000 100px,
#FFF 140px,
#FFF 220px,
#000 260px);
/*Der Winkel ist auf -45° eingestellt*/
Hintergrundposition: -1000px,0px;
Hintergrundwiederholung: keine Wiederholung;
-webkit-background-clip: Text;
}
div:hover{
Hintergrundposition: 1000px,0px;
Übergang: alle 5 s;
}
</Stil>
</Kopf>
<Text>
<div>La, la, la, la, la, la, Demacia! ! </div>
</body>
</html>
Dies ist das Ende dieses Artikels über das Beispiel, wie man mit CSS3 den Font Shining-Effekt zum Entsperren von Apple-Handys erzielt. Weitere relevante CSS3-Inhalte zum Font Shining für das Entsperren von Apple finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Lösung zur Verwendung von html2canvas zum Verarbeiten von Dom-Elementen mit Baidu-Map in Bilder
>>: Vorteile von INSERT INTO SET in MySQL
Artikel empfehlen
So passen Sie die Bash-Eingabeaufforderung in Linux an
Vorwort Wie wir alle wissen, ist Bash (die Bourne...
Einführung in den Installationsprozess von MySQL 8.0 in einer Linux-Umgebung
Inhaltsverzeichnis Vorwort 1. Linux ändert die Yu...
Grafisches Tutorial zum Herunterladen, Installieren und Konfigurieren von MySQL 8.0.22.0
MySQL 8.0.22 Download-, Installations- und Konfig...
Einführung in geplante Aufgaben im Linux-System
Inhaltsverzeichnis 1. Planaufgaben anpassen 2. Ze...
Die Einhandregel von WEB 2.0
<br />Mein vorheriger Artikel über CSS wurde...
Farbschemata für Websites Die richtigen Farben für Ihre Website auswählen
Beeinflusst Farbe die Website-Besucher? Vor einig...
JS implementiert WeChats "Shit Bombing"-Funktion
Hallo zusammen, ich bin Qiufeng. Vor Kurzem hat W...
Zusammenfassung der Updates und gefundenen Probleme des Docker Consul-Containerdienstes
Inhaltsverzeichnis 1. Container-Service-Update un...
Html Select verwendet das ausgewählte Attribut, um die Standardauswahl festzulegen
Wenn Sie einer Option das Attribut selected = &quo...
Was tun, wenn Sie Ihr Linux/Mac MySQL-Passwort vergessen?
Was tun, wenn Sie Ihr Linux/Mac MySQL-Passwort ve...
Implementierung der Breakpoint-Wiederaufnahme in Node.js
Vorwort Normaler Geschäftsbedarf: Hochladen von B...
js einfacher und grober Beispielcode zum Veröffentlichen und Abonnieren
Was ist Publizieren/Abonnieren? Lassen Sie mich I...
Detailliertes Tutorial zur Installation der MySQL 8.0.20-Datenbank auf CentOS 7
Weiterführende Literatur: MySQL8.0.20-Installatio...
Beispiele für einfache Hinzufügungs-, Lösch-, Änderungs- und Abfragevorgänge mit MySQL-Anweisungen
Dieser Artikel beschreibt anhand von Beispielen, ...
Konvertieren Sie ausgeschnittene PSD-Bilder in das Div+CSS-Format
Beispiel für das Zuschneiden einer Webseite von P...