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-Updates ist mir ein toller Detaileffekt in der System-Benutzeroberfläche aufgefallen. In den Kacheln des Startmenüs oder der Einstellungsoberfläche im UWP-Stil sind die hervorgehobenen Ränder der Elemente mausempfindlich und der hervorgehobene Teil des Randes bewegt sich mit der Bewegung der Maus. Plötzlich kam mir eine Idee: Kann dieser Effekt mit CSS erzielt werden?

analysieren

Nehmen wir als Beispiel den Effekt im Desktop-Kalender: Wenn sich die Maus bewegt, werden auch die umliegenden Ränder nach und nach sichtbar. Ist dieser Effekt nicht der Suchscheinwerfereffekt? Dies kann durch die Verwendung einer CSS-Maske mit radialem Farbverlauf erreicht werden.

Das Problem besteht jedoch darin, dass die Maske auf das gesamte Element angewendet wird. Es gibt keine Möglichkeit, sie nur auf den Rand anzuwenden, ohne den Inhalt zu beeinflussen. Hierzu können wir lediglich den Rand und den eigentlichen Inhalt trennen und in unterschiedlichen Ebenen darstellen. Das Aktualisieren der Maskenposition bei einer Mausbewegung sollte kein Problem darstellen.

erreichen

Vorbereitung

Rollen Sie zunächst zwei Ebenen mit Kalenderrastern aus: eine Ebene zur Anzeige der Datumsinformationen und die andere Ebene zur Anzeige des Rahmens mit Suchscheinwerfereffekt. Es gibt kein Problem mit der Verwendung von Flex-Layout, Raster oder sogar Inline-Blöcken. Es spielt keine Rolle. Wichtig ist, dass die oberen und unteren Raster ausgerichtet sein müssen. Dann verwenden wir einen relativen Container, um die beiden absoluten Ebenen einzuschließen und sie zu fixieren.

<div Klasse="Kalender">
    <div Klasse="Kalender-Header">
        <div class="week-day">Eins</div>
        <div class="week-day">Zwei</div>
        <div class="week-day">Drei</div>
        <div class="week-day">Vier</div>
        <div class="week-day">Freitag</div>
        <div class="week-day">Sechs</div>
        <div class="week-day">Tag</div>
    </div>
    <div Klasse="Kalender-Body">
        <div Klasse = "Rastercontainer-Grenzebene">
            <div Klasse="grid-item"></div>
            ...
            <div Klasse="grid-item"></div>
        </div>
            <div Klasse="Rastercontainer Nummer-Ebene">
            <div class="grid-item"><span>28</span><span>Vierzehn</span></div>
            <div class="grid-item"><span>29</span><span>Fünfzehn</span></div>
            ...
            <div class="grid-item"><span>2</span><span>Neunzehn</span></div>
        </div>
    </div>
  </div>

Schichtendiagramm:

Der Effekt ist dieser:

Wenn die Maus nicht darauf platziert ist, blenden Sie zunächst die Rahmenebene aus.

.border-ebene {
 ...
  Sichtbarkeit: versteckt;
}

.Kalender:Hover .Border-Layer {
  Sichtbarkeit: sichtbar;
}

CSS-Maske

CSS Mask ähnelt der Ebenenmaske in Photoshop. Sie können ein Bild als Maske auf dem Zielelement verwenden. Der Alphakanal (d. h. Transparenzinformationen) des Bildes bestimmt, welcher Teil des Zielelements sichtbar ist (Sie können auch Helligkeitsinformationen verwenden).

Wenn das Maskenbild beispielsweise ein halbtransparentes Bild ist, ist die Auswirkung auf das tatsächliche Element dieselbe wie bei der Einstellung der Deckkraft: 0,5. Wenn das Maskenbild ein fünfzackiger Stern mit einem hohlen Zentrum ist, besteht die Auswirkung darin, dass das Element in die Form eines fünfzackigen Sterns zugeschnitten wird.

Die Syntax der Maske ist fast identisch mit der des Hintergrunds. Hier verwenden wir einen radialen Farbverlauf, um einen Farbverlaufskreis mit einem Radius von 80 Pixeln von Weiß in der Mitte bis Transparent am Rand zu erstellen, und verwenden Maskenwiederholung und Maskengröße, um Wiederholungen und Verformungen zu verhindern.

-webkit-mask-image: radial-gradient (Kreis in der Mitte, weiß 0 %, transparent 80px);
  -webkit-mask-repeat: keine Wiederholung;
  -webkit-mask-size: 160px 160px; /* Radius 80px, also muss die Größe 160px sein */

Als nächstes aktualisieren wir die Maskenposition. Hierbei sind zwei Punkte zu beachten: Zum einen müssen die relativen Koordinaten der Maus zum Zielelement ermittelt werden, zum anderen ist der Positionsversatz relevant.

Es gibt eine Menge X/Y in MouseEvent. Wir verwenden die Koordinaten pageX/pageY relativ zum Dokument, subtrahieren die Koordinaten des Zielelements relativ zum Dokument und erhalten die benötigten Koordinaten. Vektorformel: AB = AC - BC :

Allerdings müssen hier noch die Koordinaten der Maskenposition verarbeitet werden. Die von uns definierte Maske ist ein kreisförmiger Farbverlauf von 160 x 160, und die Maskenposition ist identisch mit der Hintergrundposition. Sie definiert, an welcher Koordinate des Containers die Position der oberen linken Ecke (0, 0) der Maske tatsächlich ausgerichtet werden muss. Daher müssen wir (80, 80) von den berechneten Koordinaten abziehen, um den Gradientenmittelpunkt mit den Mauskoordinaten in Einklang zu halten.

var borderLayer = document.querySelector(".border-layer");

document.querySelector(".calendar").addEventListener("mousemove", Funktion(ev){
  var x = ev.SeiteX;
  var y = ev.SeiteY;
  var bounding = borderLayer.getBoundingClientRect();
  
  borderLayer.style.webkitMaskPosition = `${x - bounding.x - 80}px ${y -bounding.y - 80}px`;
});

Endergebnis: https://codepen.io/liuxiaole-the-sasster/full/OGZgpv

Nachtrag

Die Lösung, Ränder übereinander zu legen und dann Masken anzuwenden, ist nur in bestimmten Situationen effektiv und das Trennen einer weiteren Schicht erhöht den Wartungsaufwand erheblich. Als ich Informationen auf MDN nachgeschlagen habe, bin ich zufällig auf etwas namens mask-border gestoßen. Dabei handelt es sich anscheinend um eine Maske für Ränder, die allerdings bisher in keinem Browser implementiert ist.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.