|
Ob das Mapping der Mausposition oder das Implementieren von Drag-Effekten – all dies können wir in JavaScript erledigen. Tatsächlich gibt es in CSS jedoch einen prägnanteren Weg, mit dem wir die gleiche Funktion auch ohne JavaScript erreichen können! Um den Mauseffekt „Klicken und Ziehen“ nur mit CSS zu imitieren, sehen wir uns an, wie die Mausposition des Benutzers ermittelt und CSS Eigenschaften --positionX und --positionY zugeordnet wird. Im Folgenden sind die spezifischen Implementierungsschritte aufgeführt. Initialisierung Unsere erste demo verwendet --positionX und --positionY , um die Breite und Höhe eines Elements festzulegen.
<div Klasse="Inhalt">
<div Klasse="Quadrat"></div>
</div>
*, *::vorher, *::nachher {
Polsterung: 0;
Rand: 0 automatisch;
Box-Größe: Rahmenbox;
}
Körper {
Hintergrundfarbe: schwarz;
Höhe: 100vh;
}
.Inhalt {
--positionX: 0;
--positionY: 0;
Position: absolut;
oben: 0; rechts: 0; unten: 0; links: 0;
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
}
.Quadrat {
Breite: 100px;
Höhe: 100px;
Hintergrund: weiß;
} 
Dies ist unser Ausgangszustand. Wir haben hier einen Container <div> namens .content , dessen Breite und Höhe body ausfüllen, der den Inhaltstext des Projekts darstellt. <div> mit dem Klassennamen .square ist das Element, das wir in diesem Beispiel mit der Maus steuern möchten. Wir haben dem Inhalt außerdem zwei benutzerdefinierte Eigenschaften hinzugefügt. Wir verwenden die Mausposition, um die Werte dieser Eigenschaften festzulegen, und verwenden sie dann, um die Breite und Höhe des .square Elements festzulegen. Sobald wir benutzerdefinierte Eigenschaften für die Mausposition gezeichnet haben, können wir damit so ziemlich alles machen, was wir wollen. Wir können sie beispielsweise verwenden, um top/left eines absolut positionierten Elements festzulegen, transform zu steuern, background-position festzulegen, color anzupassen und sogar den Inhalt eines Pseudoelements festzulegen. Wir werden einige dieser Demos am Ende dieses Artikels sehen, zusammen mit Links zu den entsprechenden Codepen -Projekten. Netz Das Ziel besteht darin, ein unsichtbares Raster auf dem Bildschirm zu erstellen und :hover zu verwenden, um jeder „Zelle“ einen Wertesatz für unsere benutzerdefinierten Eigenschaften zuzuordnen. Wenn sich der Mauszeiger an diesem Punkt auf die rechte Seite des Bildschirms bewegt, ist der Wert von --positionX höher; wenn sich die Maus nach links bewegt, wird er niedriger. Dasselbe gilt für --positionY : Wenn der Cursor nach oben bewegt wird, ist der Wert niedriger, und wenn der Cursor nach unten bewegt wird, ist der Wert höher. Ein Hinweis zur Rastergröße und Rasteraufteilung: Wir können eigentlich jede beliebige Rastergröße verwenden. Je größer er ist, desto genauer ist der benutzerdefinierte Eigenschaftswert. Das bedeutet aber auch, dass wir mehr Rasterblöcke haben werden. Zu viele Rasterblöcke können zu Leistungsproblemen führen. Es ist sehr wichtig, die Rastergröße in einem angemessenen Gleichgewicht entsprechend dem tatsächlichen Projekt anzupassen. Nehmen wir nun an, wir benötigen ein 10×10-Raster, also insgesamt 100 Rasterkacheln in unserem Container. (Bei der tatsächlichen Entwicklung können Sie Syntax wie „pug“ verwenden, um schnell Tabellen zu erstellen. Im Beispiel werden alle 100 Leerzeichen durch div dargestellt.)
<div Klasse="Zelle"></div>
<div Klasse="Zelle"></div>
<div Klasse="Zelle"></div>
<!-- 97 weitere Zellen -->
<div Klasse="Inhalt">
<div Klasse="Quadrat"></div>
</div> Aufgrund der kaskadierenden Beziehung wird .cell Element vor dem .content -Element platziert. Wir möchten .cell verwenden, um .square zu steuern. Aufgrund der kaskadierenden Beziehung von CSS kann ein Element nur seine untergeordneten Elemente (oder untergeordnete Elemente untergeordneter Elemente) und die Geschwisterelemente (oder untergeordnete Elemente von Geschwisterelementen) dahinter steuern. Dies bedeutet zweierlei: - Jede
.cell muss dem Element vorangehen, das sie steuern möchte (in diesem Fall .square ). - Wir können diese
.cell nicht in einen Container einfügen, da das .content Element sonst nicht mehr ihr Geschwisterelement wäre.
Positionierungszellen Es gibt viele Möglichkeiten, .cells zu positionieren. Beispielsweise können wir position: absolute verwenden und die Eigenschaften top und left festlegen, oder wir können die Position über transform “ konvertieren. Die einfachste Möglichkeit ist jedoch die Verwendung display: grid .
Körper {
Hintergrundfarbe: #000;
Höhe: 100vh;
Anzeige: Raster;
Rastervorlage: Wiederholung (10, 1fr) / Wiederholung (10, 1fr);
}
.Zelle {
Breite: 100 %;
Höhe: 100%;
Rand: 1px durchgehend grau;
Z-Index: 2;
} border ist nur vorübergehend und wird entwickelt, damit wir das Gitter auf dem Bildschirm sehen können. Er wird später entfernt.
z-index ist sehr wichtig, da die Zelle über dem Inhalt angezeigt werden soll. Folgendes haben wir bisher abgeschlossen:
<div Klasse="Zelle"></div>
<div Klasse="Zelle"></div>
<div Klasse="Zelle"></div>
<!-- 97 weitere Zellen -->
<div Klasse="Inhalt">
<div Klasse="Quadrat"></div>
</div>
*, *::vorher, *::nachher {
Polsterung: 0;
Rand: 0 automatisch;
Box-Größe: Rahmenbox;
}
Körper {
Hintergrundfarbe: schwarz;
Höhe: 100vh;
Anzeige: Raster;
Rastervorlage: Wiederholung (10, 1fr) / Wiederholung (10, 1fr);
}
.Zelle {
Breite: 100 %;
Höhe: 100%;
Rand: 1px durchgehend grau;
Z-Index: 2;
}
.Inhalt {
--positionX: 0;
--positionY: 0;
Position: absolut;
oben: 0; rechts: 0; unten: 0; links: 0;
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
}
.Quadrat {
Breite: 100px;
Höhe: 100px;
Hintergrund: weiß;
} 
Mehrwert schaffen Wir möchten die Werte von --positionX und --positionY über .cell festlegen. Wenn wir .cell über die erste Zelle (linke Spalte) hover , sollte der Wert --positionX 0 sein. Wenn wir den Mauszeiger über .cell in der zweiten Spalte bewegen, sollte der Wert 1 sein. Dritte 2 und so weiter. Das gleiche gilt für y軸. Wenn wir den Mauszeiger über die erste (oben) Zeile .cell bewegen, sollte --positionY 0 sein, wenn wir den Mauszeiger über die Zelle in der zweiten Zeile bewegen, sollte der Wert 1 sein usw. 
Ein schwarzes Raster mit den Quadraten 10 x 10, weißen Rändern und von links nach rechts angeordneten Zahlen. Die Zahlen im Bild stellen die Nummer jeder Zelle im Raster dar. Wenn wir eine einzelne .cell als Beispiel nehmen – Zelle 42 – können wir sie mit :nth-child() auswählen:
.Zelle:n-tes-Kind(42) { } Aber wir müssen ein paar Dinge bedenken: - Dieser Selektor soll nur wirksam werden, wenn der Mauszeiger über die Zelle
hover wird, daher müssen wir ihm den Anhang :hover zuweisen. - Wir möchten das
.content Element und nicht die Zelle selbst auswählen, daher müssen wir hierzu den allgemeinen Geschwisterselektor ~ verwenden.
Um nun --positionX auf 1 und --positionY auf 3 zu setzen, wenn der Mauszeiger über die 42. Zelle hover wird, gehen Sie folgendermaßen vor:
.cell:nth-child(42):hover ~ .content {
--positionX: 1;
--positionY: 3;
} Aber wer möchte das bei 100 Zellen schon 100 Mal machen! ? Es gibt einige Möglichkeiten, dies zu vereinfachen: - Wir verwenden eine
Sass @for -Schleife, um alle 100 Zellen zu durchlaufen und einige Berechnungen durchzuführen, wobei wir --positionX und --positionY für jede Schleife festlegen. - Um die x-Achse und die y-Achse zu trennen, verwenden Sie
:nth-child um jede Zeile und Spalte separat auszuwählen. - Kombinieren Sie beide Ansätze und verwenden Sie sowohl
Sass @for -Schleife als auch die funktionale Notation :nth-child .
Ich habe sorgfältig darüber nachgedacht, was der einfachste und beste Ansatz wäre, obwohl alle Ansätze Vor- und Nachteile haben. Aufgrund der Menge des zu schreibenden Codes, der Qualität des kompilierten Codes und der mathematischen Komplexität habe ich mich letztendlich für den dritten Ansatz entschieden. Wenn Sie einen besseren Ansatz haben, lassen Sie es mich in den Kommentaren wissen. Werte setzen mit @for -Schleife
@für $i von 0 bis 10 {
.cell:n-tes-Kind(???):hover ~ .content {
--positionX: #{$i};
}
.cell:n-tes-Kind(???):hover ~ .content {
--positionY: #{$i};
}
} Dies ist ein grundlegendes Schleifen-Framework, und wir müssen 10-mal eine Schleife ausführen, da das oben erstellte Raster 10 Zeilen und 10 Spalten hat. Teilen Sie das Raster in x軸und y軸auf, legen Sie --positionX für jede Spalte und --positionY für jede Zeile fest. Was wir jetzt tun müssen, ist, einen geeigneten mathematischen Ausdruck zu finden und ihn in das ??? einzufügen, um jede Zeile und Spalte auszuwählen. Beginnen wir mit x軸Wenn wir zu unserem Rasterbild mit den Zahlen oben zurückkehren, können wir sehen, dass alle Zellen in第2列Zahlen enthalten, die 10的倍數加2 sind. Die Zellen in第2列sind 10的倍數加3 ... Wandeln wir dies nun in einen funktionalen Ausdruck für :nth-child . So kann Spalte 2 dargestellt werden: - 10n bedeutet, jedes Vielfache von 10 auszuwählen.
- 2 ist die Spaltennummer und in unserer Schleife ersetzen wir die Spaltennummer durch
#{$i +1] um die Reihenfolge zu wiederholen.
.cell:n-tes-Kind(10n + #{$i + 1}):hover ~ .content {
--positionX: #{$i};
} Kommen wir nun zur y-Achse Schauen Sie sich das Gitterbild noch einmal an und konzentrieren Sie sich auf第4行, wo die Gitternummern zwischen 41與50 liegen. Die Gitternummern für第5行liegen zwischen 51與60 und so weiter. Um jede Zeile auszuwählen, müssen wir ihren Bereich definieren. Der Bereich für die vierte Zeile lautet beispielsweise:
.Zelle:n-tes Kind(n + 41):n-tes Kind(-n + 50) (n + 41) ist der Anfang des Bereichs.
(-n + 50) ist das Ende des Bereichs.
Jetzt verwenden wir $i值, um die Zahlen in der mathematischen Formel zu ersetzen. Für den Anfang des Bereichs erhalten wir (n + #{10 * $i + 1}) und für das Ende des Bereichs (-n + #{10 * ($i + 1)}) . Daher lautet die abschließende @for -Schleife:
@für $i von 0 bis 10 {
.cell:n-tes-Kind(10n + #{$i + 1}):hover ~ .content {
--positionX: #{$i};
}
.cell:n-tes Kind(n + #{10 * $i + 1}):n-tes Kind(-n + #{10 * ($i + 1)}):hover ~ .content {
--positionY: #{$i};
}
} Zuordnung abgeschlossen! Wenn wir mit der Maus über das Element fahren, ändern sich die Werte von --positionX und --positionY entsprechend der Mausposition. Das bedeutet, dass wir sie verwenden können, um Elemente innerhalb unseres Inhalts zu steuern. Umgang mit benutzerdefinierten Attributen Ok, nachdem wir nun die Mausposition zwei benutzerdefinierten Eigenschaften zugeordnet haben, besteht der nächste Schritt darin, diese zu verwenden, um die Breiten- und Höhenwerte des .square Elements zu steuern. Beginnen wir mit der Breite. Nehmen wir an, wir möchten, dass das .square Element eine Mindestbreite von 100px hat (also wenn sich der Mauszeiger auf der linken Seite des Bildschirms befindet). Außerdem möchten wir, dass es bei jedem Schritt, den der Mauszeiger nach rechts bewegt, 20px wächst. Mit calc() können wir Folgendes erreichen:
.Quadrat {
Breite: berechnet (100px + var (--positionX) * 20px);
} Für die Höhe machen wir dasselbe, verwenden aber stattdessen --positionY :
.Quadrat {
Breite: berechnet (100px + var (--positionX) * 20px);
Höhe: berechnet (100px + var (--positionY) * 20px);
} Das ist es! Jetzt haben wir ein einfaches .square -Element, dessen Breite und Höhe von der Mausposition gesteuert werden. Bewegen Sie den Mauszeiger über die Benutzeroberfläche, um zu sehen, wie sich Breite und Höhe des Quadrats entsprechend ändern. Unten finden Sie den vollständigen Code für das gesamte Beispiel.
<div Klasse="Zelle"></div>
<div Klasse="Zelle"></div>
<div Klasse="Zelle"></div>
<!-- 97 weitere Zellen -->
<div Klasse="Inhalt">
<div Klasse="Quadrat"></div>
</div>
*, *::vorher, *::nachher {
Polsterung: 0;
Rand: 0 automatisch;
Box-Größe: Rahmenbox;
}
Körper {
Hintergrundfarbe: schwarz;
Höhe: 100vh;
Anzeige: Raster;
Rastervorlage: Wiederholung (10, 1fr) / Wiederholung (10, 1fr);
}
.Zelle {
Breite: 100 %;
Höhe: 100%;
// Rand: 1px durchgehend grau;
Z-Index: 2;
}
@für $i von 0 bis 10 {
.cell:n-tes-Kind(10n + #{$i + 1}):hover ~ .content {
--positionX: #{$i};
}
.cell:n-tes Kind(n + #{10 * $i + 1}):n-tes Kind(-n + #{10 * ($i + 1)}):hover ~ .content {
--positionY: #{$i};
}
}
.Inhalt {
--positionX: 0;
--positionY: 0;
Position: absolut;
oben: 0; rechts: 0; unten: 0; links: 0;
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
}
.Quadrat {
Breite: berechnet (100px + var (--positionX) * 20px);
Höhe: berechnet (100px + var (--positionY) * 20px);
Hintergrund: weiß;
Übergang: alle 0,3 s;
} 
Ich habe einen kleinen Übergangseffekt hinzugefügt, damit es weicher aussieht. Dies ist natürlich nicht notwendig. Ich habe auch border .cell Elements auskommentiert. Versuchen wir einen alternativen Ansatz Es kann eine Situation geben, in der Sie --positionX und --positionY „umgehen“ und den endgültigen Wert direkt in @for循環festlegen möchten. Für unser Beispiel kann dies wie folgt erreicht werden:
@für $i von 0 bis 10 {
.cell:n-tes-Kind(10n + #{$i + 1}):hover ~ .content {
--squareWidth: #{100 + $i * 20}px;
}
.cell:n-tes Kind(n + #{10 * $i + 1}):n-tes Kind(-n + #{10 * ($i + 1)}):hover ~ .content {
--squareHeight: #{100 + $i * 20}px;: #{$i};
}
} Das .square -Element kann dann seine Eigenschaften wie folgt anpassen:
.Quadrat {
Breite: var(--squareWidth);
Höhe: var(--squareHeight);
} Dieser Ansatz ist etwas flexibler, da er fortgeschrittenere mathematische (und String-)Funktionen Sass ermöglicht, aber die Hauptprinzipien sind genau dieselben wie in unserem Beispiel. Wie geht es weiter? Nun, den Rest überlassen wir Ihnen und Sie müssen entscheiden, wie Sie es verwenden – und die Möglichkeiten sind endlos! Können Sie die Technik zum Zuordnen der Mausposition in CSS noch einen Schritt weiterführen? Hier einige Beispiele für Seitengrafiken, die sich mit der Maus verändern: Springende Partikel 
3D-Text 
Perspektivisches Bild 
Schreibmaschineneffekt 
Artikeladresse: https://www.cnblogs.com/dragonir/p/14557203.html Autor: dragonir Dies ist das Ende dieses Artikels über die Zuordnung der Mausposition in CSS und die Steuerung der Seitenelemente durch Bewegen der Maus. Weitere relevante Inhalte zur CSS-Zuordnung der Mausposition finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!
| 
