Einführung in die Verwendung von Clip-Pfad in CSS3

1. Grundkonzepte

Beim Aktualisieren der QQ-Bereichsdynamik habe ich eine Anzeige gefunden. Wenn der Benutzer in der dynamischen Liste nach oben und unten gleitet, wird das Anzeigenbild automatisch umgeschaltet Was den Bildschirm betrifft, ist dies zweifellos eine sehr subtile Überlegung. Wie wird dieser Effekt erzielt?

Als Nächstes sprechen wir über die konkreten Umsetzungsideen dieses Effekts:

1. Positionieren Sie die beiden Bilder und stapeln Sie sie relativ zum Bildcontainer

2. Wählen Sie einen Kreismittelpunkt in der oberen linken Ecke oder unteren rechten Ecke des Bildcontainers aus, zeichnen Sie einen Kreis und vergrößern Sie kontinuierlich den Radius des Kreises, um das zweite Bild anzuzeigen 🎜>

   Nach oben wischen Beim Herunterziehen ändert sich der Radius des Kreises dynamisch entsprechend der Gleitgeschwindigkeit;

3. Wenn der Abstand zwischen dem Bildcontainer und der Ober- oder Unterseite von Der Bildschirm ist 0, die Bildstapelreihenfolge und die Kreismittenposition werden entsprechend geändert.

4. Zeichnen Sie einen Kreis auf das Bild. Warum wird das zweite Bild angezeigt? Apropos, wir müssen über unseren heutigen Protagonisten Clip-Path sprechen und die Beschreibung auf MDN zitieren:

Das Clip-Path-Attribut kann einen Beschneidungsbereich erstellen, in dem nur ein Teil des Elements angezeigt werden kann. Teile innerhalb des Bereichs werden angezeigt und Teile außerhalb des Bereichs ausgeblendet. Der Beschneidungsbereich ist ein Pfad, der durch einen Verweis auf eine eingebettete URL oder den Pfad einer externen SVG-Datei oder als Form wie „circle()“ definiert wird. Die Eigenschaft „clip-path“ ersetzt die inzwischen veraltete Eigenschaft „clip“.

Die Bedeutung von Clip-Pfad ist der Beschneidungspfad oder die durch das ClipPath-Tag in SVG definierte Form, bei der ein Teil des Bereichs ausgeschnitten wird, der beibehalten werden muss. Damit lässt sich das Layout der Webseite vielfältig umsetzen.

Bevor der Clip-Pfad erschien, hatte das Clip-Attribut in CSS2.1 auch einen Clipping-Effekt, unterstützte jedoch nur Rechtecke und wirkte sich nur auf Elemente mit position:absolute oder position:fixed aus folgt:

Hinweis: Die Reihenfolge der Rect-Parameter ist oben, rechts, unten, links

clip: rect(60px, 60px, 60px, 60px); // 标准写法
clip: rect(60px  60px  60px  60px); // 兼容 ie 及 火狐浏览器

Alle gängigen Browser unterstützen das Clip-Attribut und die Anzeige von Sprite (CSS Sprite) weiterhin hat es Es ist nützlich, aber aufgrund der Einschränkungen des Clip-Attributs wurde Clip durch Clip-Pfad ersetzt. Bei der normalen Entwicklung können wir Attribute wie „Rahmen“ und „Rahmenradius“ verwenden, um einfache Muster wie Dreiecke, Kreise oder abgerundete Rechtecke zu erstellen. In Kombination mit SVGs Pfad-, Animations- und anderen Tags können wir erstellen weitere Muster.

2. Verwendungspraxis

Das Clip-Path-Attribut kann viele Grafiken zuschneiden, z. B. Kreise, Ellipsen, Polygone, Einfügungen, und Sie können auch Animationen und das ClipPath-Tag von SVG verwenden.

Kreis

Ellipse Ellipse

clip-path: circle(25% at 50% 50%);

Einschub

clip-path: ellipse(25% 25% at 50% 50%);

Polygon Polygon

clip-path: inset(35% 35% 35% 35% round 0 70% 0 70%);

URL

clip-path: polygon(50% 0, 25% 50% ,75% 50%);

Es ist erwähnenswert, dass das ClipPath-Tag von SVG zum Umbrechen von Animationen verwendet werden kann. Der attributeName des Animate-Tags bezieht sich auf das Festlegen des Radius des Kreises . Es können mehrere durch Semikolons getrennte Werte angegeben werden, dur bezieht sich auf die Dauer der Animation, repeatCount bezieht sich auf die Anzahl der Animationen.

<section class="container">
  <img src="img01.jpg" class="contract">
  <img src="img02.jpg">
</section>
<svg height="0" width="0">
  <clipPath id="clip02">
    <circle cx="400" cy="210" r="0">
      <animate
        attributeType="CSS"
        attributeName="r"
        values="0;480;0"
        dur="9s"
        repeatCount="2"
      />
    </circle>
  </clipPath>
</svg>
.contract {
  clip-path: url(#clip02);
  z-index:1;
}

Kompatibilität

Derzeit unterstützen weder IE noch Edge dieses Attribut. Firefox unterstützt Clip-Path nur teilweise, was bedeutet, dass es nur Formen und URL-Syntax (#Pfad) für Inline-SVG unterstützt. Chrome, Safari und Opera erfordern das Präfix -webkit-, um mit dieser Eigenschaft kompatibel zu sein. Externe SVG-Formen werden nicht unterstützt. Für weitere Kompatibilitätsinformationen klicken Sie hier, um die Kompatibilität des Clip-Path-Browsers anzuzeigen.

3. Zusammenfassung der Erfahrungen

Mithilfe von URL-Inline-SVG (#path) können wir problemlos komplexe Formen ausschneiden und auch einige lebendige Animationseffekte einbinden, wie z. B. das Hinzufügen einer fächerförmigen Maske B. zum Countdown von Karten und Wetten in einem Pokerspiel oder zum Hinzufügen von Countdown-Fortschritten am Rand eines Rechtecks, zum Laden von Animationen usw., kann alles geschickt mithilfe des Clip-Pfad-Attributs implementiert werden. Gleichzeitig kann das Clip-Pfad verwendet werden. Das Pfadattribut kann beim Zuschneiden von Grafiken flexibel verwendet werden.

Verwandte Empfehlungen:

CSS-Clip-Pfad

Detaillierte Erläuterung der Verwendung des Clip-Pfad-Bereichsbeschneidungsattributs in CSS

Fragment-Splicing-Animation eines beliebigen Elements basierend auf clip-path_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von Clip-Pfad in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!