Beispielcode für die Verwendung von CSS zum Abdunkeln der Schriftfarbe des ausgewählten Bereichs beim Scrollen
|
Wenn Sie den Datumswähler kapseln, müssen Sie die Schriftfarbe bei der Auswahl abdunkeln. Schauen wir uns den Effekt nach der Implementierung an
Sie können sehen, dass nicht der gesamte Text abgedunkelt ist, sondern der Bereich in der Mitte. Der Schwerpunkt der heutigen Diskussion liegt nicht auf der Kapselung des Selektors, sondern hauptsächlich auf dem Stileffekt. Wenn Sie die Implementierungsideen dieser Komponente verstehen möchten, können Sie den vorherigen Artikel „Implementierungsideen für Datumswähler“ lesen: 1. Zunächst einmal wird die Farbe des Bereichs dunkler, wenn er eintritt , nicht die gesamte Schriftart , daher können wir nicht damit beginnen, den Textstil aus der Auswahl zu ändern. Wenn wir den Bereich sehen, denken wir zuerst an die Maske . 2. Es ist jedoch einfach, die mittlere Farbe heller zu machen, indem man eine Maskenebene verwendet. Dazu muss man nur eine Maskenebene + Transparenz + Positionierung hinzufügen . Aber wie kann man die mittlere Farbe durch Hinzufügen einer Maskenebene dunkler machen ? Wenn Sie sich damit herumschlagen, den Effekt der Abdunklung der Farbe des ausgewählten Teils zu lösen, werden Sie in tiefes Grübeln verfallen. . . 3. Wir wissen, dass es einfach ist, die Farbe aufzuhellen. Fügen wir daher allen Teilen außer dem ausgewählten mittleren Teil eine Maskenebene hinzu , um die Farbe aufzuhellen. Der ausgewählte Teil wird dann natürlich dunkel. 4. Nachdem Sie sich entschieden haben , oben und unten Maskenebenen hinzuzufügen, ist noch eine weitere Frage zu berücksichtigen: Kann Code-Implementierung:
//html-Struktur <body>
<div Klasse="Box">
<p Klasse="oben"></p>
<p Klasse="eins">123123</p>
.....Viele <p class="one">123123</p> werden hier weggelassen
<p Klasse="unten"></p>
</div>
</body>
//Stil <Stil>
.Kasten{
Rand oben: 100px;
Höhe: 420px;
Breite: 300px;
Position: relativ;
Hintergrundfarbe: fff;
Überlauf: automatisch;
Rand: Indigo 1px durchgezogen;
}
P{
Rand: 0;
Höhe: 20px;
Textausrichtung: zentriert;
}
// Füge eine Maskenebene mit weißem Hintergrund und Transparenz hinzu, um die Farbe des blockierten Textes heller zu machen.top{
Höhe: 200px;
Hintergrundfarbe: #fff;
Position: klebrig; //******* Tastencode oben: 0; //******* Tastencode Deckkraft: .4; //******* Tastencode}
.unten{
Höhe: 200px;
Hintergrundfarbe: #fff;
Position: klebrig;
unten: 0;
Deckkraft: .4;
}
</Stil>
Ergebnis:
Dies ist das Ende dieses Artikels über den Beispielcode zur Implementierung von CSS zum Abdunkeln der Schriftfarbe des ausgewählten Bereichs beim Scrollen. Weitere relevante Inhalte zu CSS zum Abdunkeln der Schriftfarbe des ausgewählten Bereichs finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: HTML-Code zum Hinzufügen eines Mengenabzeichens zur Nachrichtenschaltfläche
>>: Bootstrap 3.0 - Schaltflächenstil für Lernnotizen
Artikel empfehlen
Zusammenfassung ungewöhnlicher JS-Operationsoperatoren
Inhaltsverzeichnis 2. Komma-Operator 3. JavaScrip...
CSS3 erstellt eine Webanimation, um einen springenden Balleffekt zu erzielen
Grundlegende Vorbereitung Für diese Implementieru...
Zusammenfassung der Online-Methoden zur Fehlerbehebung bei MySQL-Synchronisierungsfehlern (unbedingt lesen)
Vorwort Nach einem Failover sind Synchronisierung...
Detaillierte Erklärung zur Verwendung von Echarts-Maps in Angular
Inhaltsverzeichnis Initialisierung von Echart App...
Detaillierte Erläuterung des Implementierungsprozesses von Nginx zur Aktivierung des Brotli-Komprimierungsalgorithmus
Vorwort Um in Webanwendungen Datenverkehr zu spar...
Aufrufen von Baidu Map zum Abrufen von Längen- und Breitengrad in Vue
Im Projekt ist es erforderlich, den Breiten- und ...
3 einfache Möglichkeiten, Karusselleffekte mit JS zu erzielen
In diesem Artikel werden 3 Methoden beschrieben, ...
So installieren Sie Golang unter Linux
Go ist eine Open-Source-Programmiersprache, die d...
Aggregatabfrage- und Union-Abfragevorgänge für MySQL-Datenbanken
Inhaltsverzeichnis 1. Einfügen der abgefragten Er...
Analyse des Prinzips und der Funktion der MySQL-Datenbank-Master-Slave-Replikation
Inhaltsverzeichnis 1. Datenbank-Master-Slave-Klas...
MySQL-Kill-Befehl – Verwendungshandbuch
KILL [VERBINDUNG | ABFRAGE] Prozesslisten-ID In M...
So verwenden Sie xshell zum Herstellen einer Verbindung zu Linux in VMware (2 Methoden)
【Vorwort】 Ich möchte vor Kurzem das Prüfungssyste...
Ein Beispiel für die Implementierung eines adaptiven Quadrats mit CSS
Die traditionelle Methode besteht darin, ein Quad...
Detaillierte Erläuterung von CSS, um den Effekt der Beleuchtung des Rahmens durch Nachahmung der Windows 10-Maus zu erzielen
Nach der Installation des neuesten Windows 10-Upd...
Tutorial zur Installation der Dekomprimierungsversion von MySQL 8.0.12
In diesem Artikel finden Sie das Installations-Tu...