Wie können Sie mithilfe von CSS Segmente in einem Kreis erstellen und unterschiedliche Slice-Anforderungen bewältigen?

Segmente in einem Kreis mit CSS: Umgang mit unterschiedlichen Slice-Anforderungen

Während CSS das Erstellen von Kreisen mithilfe des Randradius-Hacks ermöglicht, erweitert diese Technik Das Einbeziehen von Segmenten stellt eine Herausforderung dar. Es gibt jedoch eine Lösung, die darin besteht, CSS und SCSS zu kombinieren, um dies zu erreichen, ohne auf JavaScript zurückgreifen zu müssen.

Generieren gleicher Slices

Wenn die Slices keine unterschiedlichen Elemente erfordern und Sind alle gleich groß, bietet SCSS die Flexibilität, eine Liste von Stopps für einen konischen Gradienten zu erstellen. Bei gegebener Farbpalette kann eine SCSS-Funktion die Stopps gleichmäßig um den Kreis verteilen.

<code class="scss">@function stops($c) {
  $n: length($c);
  $p: 100%/$n;
  $l: ();

  @for $i from 1 through $n {
    $l: $l, nth($c, $i) 
      if($i > 1, 0%, unquote(''))
      if($i < $n, round($i*$p), unquote(''))
  }

  @return $l
}</code>

Verwendung von Conic-Gradient für Segmente

Nachdem die Stoppliste generiert wurde, Ein konischer Farbverlauf wird verwendet, um die Segmente auf das kreisförmige Element zu malen. Für gleich große Segmente ist der Code einfach:

<code class="css">.pie {
  width: 20em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(stops($c))
}</code>

Startwinkel steuern

Um sicherzustellen, dass die Segmente in einem bestimmten Winkel beginnen (außer 12°). Clock) kann das Schlüsselwort from zum conic-gradient() hinzugefügt werden:

<code class="css">background: conic-gradient(from 17deg, stops($c))</code>

Umgang mit inhaltsreichen Slices

Für Segmente, die Inhalte benötigen oder benötigen Für eine Animation außerhalb des Kreises ist ein komplexerer Ansatz erforderlich. Dabei werden Pseudoelemente und CSS-Animationen verwendet, um das gewünschte Ergebnis zu erzielen.

Das obige ist der detaillierte Inhalt vonWie können Sie mithilfe von CSS Segmente in einem Kreis erstellen und unterschiedliche Slice-Anforderungen bewältigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!