Wie implementiert man den Mausfolgeeffekt mit reinem CSS? (Detaillierte Code-Erklärung)

Mausfolgen bedeutet, wie der Name schon sagt, dass die Elemente der Bewegung der Maus folgen und entsprechende Bewegungen ausführen. Im Allgemeinen ist CSS für die Darstellung und JavaScript für das Verhalten verantwortlich. Der Effekt der Mausverfolgung ist Verhalten und erfordert normalerweise die Hilfe von JS, um dies zu erreichen.

Natürlich liegt der Schwerpunkt dieses Artikels auf der Einführung, wie man mit CSS einige verhaltensbezogene Animationseffekte mit der Maus simuliert, ohne auf JS zurückgreifen zu müssen.

Schauen wir uns zunächst einmal an, wie der Mausfolgeeffekt aussieht:

Prinzip

Nehmen Sie die obige Demo als Beispiel. Um CSS zum Implementieren der Mausverfolgung zu verwenden, ist der wichtigste Punkt:

Wie kann man in Echtzeit überwachen, wo sich die aktuelle Maus befindet?

OK, tatsächlich sind viele CSS-Effekte untrennbar mit dem Wort „Schandfleck“ verbunden. Um zu erkennen, wo sich die aktuelle Maus befindet, müssen wir die Seite nur mit Elementen abdecken:

Wir verwenden 100 Elemente, um die gesamte Seite abzudecken. Beim Bewegen des Mauszeigers wird die Farbe wie folgt angezeigt:

<div class="g-container">
  <div class="position"></div>
  <div class="position"></div>
  <div class="position"></div>
  <div class="position"></div>
  ... // 100个
</div>

.g-container {
    position: relative;
    width: 100vw;
    height: 100vh;
}
 
.position {
    position: absolute;
    width: 10vw;
    height: 10vh;
}
 
@for $i from 0 through 100 {
     
    $x: $i % 10;
    $y: ($i - $x) / 10;
     
    .position:nth-child(#{$i + 1}) {
        top: #{$y * 10}vh;
        left: #{$x * 10}vw;
    }
 
    .position:nth-child(#{$i + 1}):hover {
        background: rgba(255, 155, 10, .5)
    }
}

Sie können diesen Effekt erhalten:

Okay, wenn Sie den Hover-Effekt jedes Elements entfernen, ist die Operationsseite zu diesem Zeitpunkt tatsächlich It hat keine Wirkung. Aber gleichzeitig können wir durch die :hover-Pseudoklasse ungefähr wissen, in welchem ​​Bereich auf der Seite sich die aktuelle Maus befindet.

Okay, lass uns fortfahren, ein weiteres Element (eine runde Kugel) zur Seite hinzuzufügen und es absolut in der Mitte der Seite zu positionieren:

<div class="g-ball"></div>

.ball {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10vmax;
    height: 10vmax;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

Zuletzt verwenden wir das ~-Geschwister Elementauswahl: Auf der Seite hover (die tatsächlich über hundert versteckte Divs schwebt) wird die Position des Ballelements durch das Div gesteuert, auf dem sich der Mauszeiger gerade befindet.

@for $i from 0 through 100{
     
    $x: $i % 10;
    $y: ($i - $x) / 10;
     
    .position:nth-child(#{$i + 1}):hover ~ .ball {
        top: #{$y * 10}vh;
        left: #{$x * 10}vw;
    }
}

An dieser Stelle wurde ein einfacher reiner CSS-Mausfolgeeffekt implementiert, der für jeden leicht zu verstehen ist:

Die vollständige DEMO finden Sie hier: CodePen-Demo – CSS zur Implementierung der Mausverfolgung

Vorhandene Probleme

Was die obige Demo betrifft, gibt es immer noch viele Mängel. Zum Beispiel:

Die Genauigkeit ist zu schlecht

Das kann passieren Steuern Sie nur die Bewegung von Elementen in den Raum, in dem sich das Div befindet, aber nicht die genaue Position der Maus. Dies können wir optimieren, indem wir die Anzahl der ausgeblendeten Divs erhöhen. Erhöhen Sie beispielsweise die Zahl von 100 gekachelten Divs auf 1000 gekachelte Divs.

Die Bewegung ist nicht flüssig genug

Der Effekt sieht nicht flüssig genug aus. Dies muss möglicherweise durch eine angemessene Beschleunigungsfunktion und eine entsprechende Animationsverzögerung optimiert werden.

Trocken werden

Ja. Nachdem wir das Prinzip nun beherrschen, werfen wir einen Blick darauf, welche weiteren interessanten Effekte wir mit dieser Technik erzielen können.

CSS-Mausfolge-Tasteneffekt

Zuerst sah ich den folgenden Effekt auf CodePen, der mit SVG + CSS + JS implementiert wurde: Ich habe mich gefragt, ob ich es nur mit CSS kopieren könnte:

CodePen-Demo – Klebrige Maus folgen

Okay, das Das Ideal ist sehr voll und die Realität ist sehr dünn. Allein die Verwendung von CSS weist noch viele Einschränkungen auf.

• Aber wir können immer noch die oben eingeführte Methode verwenden, um die Mausverfolgung zu implementieren

• Verwenden Sie den CSS-Filter filter: Blur() Contrast() zur Simulation Elemente Fusion, für Details können Sie diesen Artikel lesen: CSS-Filterfähigkeiten und Details, die Sie nicht kennen

Okay, werfen wir einen Blick auf die Insolvenzversion Simulation nur mit CSS-Effekt:

Es ist ein bisschen zu seltsam. Sie können den Effekt ein wenig verstärken, indem Sie die Farbe und die Filterstärke anpassen (probieren Sie einfach verschiedene Dinge aus). ), können Sie einen etwas besseren Effekt wie bei YiDiudiu erhalten:

Demo Poke Me, CodePen Demo – CSS-Mausfolge-Tasteneffekt

Mausverfolgungsanimation im Vollbildmodus

OK, weitermachen, lass uns etwas noch Umwerfenderes machen. Nun, das ist die auffällige Sorte. Sweat_smile

Wenn wir nicht nur ein Element, sondern mehrere Elemente kontrollieren. Die Animationseffekte zwischen mehreren Elementen werden mit unterschiedlichen Übergangsverzögerungen eingestellt, um die Bewegung nacheinander zu verzögern. Wow, das ist schon aufregend, wenn ich nur darüber nachdenke. Zum Beispiel:

CodePen-Demo – Mausverfolgungsanimation PURE CSS MAGIC MIX

Wenn wir einfallsreicher sein können, dann Sie kann mit mehr Funken kollidieren:

Dieser Effekt ist das Werk von Yusuke Nakaya, einem japanischen CodePen-Autor, der mir sehr gut gefällt. Quellcode: Demo - - Nur CSS: Wasseroberfläche

Maus-Folge-Anweisung

Natürlich muss es keine Elementbewegung anzeigen. Die Technik, Divs zum Füllen der Seite zu verwenden, um die aktuelle Position des Elements zu erfassen, kann auch für andere Effekte verwendet werden, z. B. zum Anzeigen der Mausbewegungsbahn:

1. Standardmäßiger vollständiger Hintergrund transition-duration: 0.5s

des Divs 2. Wenn Sie den Mauszeiger über das Hintergrund-Div des Elements bewegen, ändern Sie das transition-duration: 0s des Divs, über das Sie gerade den Mauszeiger bewegen, und geben Sie beim Bewegen des Mauszeigers die Hintergrundfarbe an, damit das div, auf das sich derzeit der Mauszeiger befindet, wird sofort angezeigt

3. Wenn die Maus das div verlässt, wechselt das transition-duration des div wieder in den Standardzustand, nämlich transition-duration: 0.5s, und die Hintergrundfarbe verschwindet Auf diese Weise wird die Hintergrundfarbe des linken Divs langsam transparent. Der Effekt verursacht Geisterschatten.

CodePen-Demo – Übergang abbrechen

Endlich

Tatsächlich gibt es viele interessante Einsatzmöglichkeiten, die Interessierte selbst machen und noch mehr ausprobieren und kombinieren können.

Menschen fragen mich oft: Können diese seltsamen Gebräuche im tatsächlichen Geschäft verwendet werden? Ist es nützlich oder nicht? Nun, ich bin der Meinung, dass es im Geschäftsleben vielleicht wirklich nicht verwendet wird oder die Anwendungsszenarien äußerst begrenzt sind, aber wenn Sie mehr darüber wissen, können Sie bei Problemen mehr Auswahlmöglichkeiten haben, mehr Raum zum Denken haben und zumindest ein besseres divergentes Denken erreichen harmlos.

Noch mehr interessantes CSS, an das Sie vielleicht noch nicht gedacht haben, können Sie hier vorbeischauen:

CSS-Inspiration – CSS-Inspiration

Gut, okay, dieser Artikel endet hier, ich hoffe, er wird Ihnen hilfreich sein :)

Dieser Artikel wurde reproduziert von: https://www.cnblogs.com/coco1s/p/10481872. html

Weitere coole CSS3-, HTML5-, Javascript- und jQuery-Spezialeffektcodes finden Sie unter: JS-Spezialeffektsammlung

Das obige ist der detaillierte Inhalt vonWie implementiert man den Mausfolgeeffekt mit reinem CSS? (Detaillierte Code-Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!