Logische Operationen mit CSS -Variablen

Dieser Artikel zeigt, wie logische Operationen in CSS -Switch -Variablen (Variablen mit den Werten 0 oder 1) unter Verwendung von Arithmetik innerhalb der Funktion calc() ausgeführt werden. Wir fehlen dedizierte logische Funktionen in CSS, aber diese Berechnungen liefern wirksame Emulationen.

Logische Operationen in CSS mit calc()

Nicht Betrieb

Die Negation einer Schaltervariable ( --j ) ist einfach: Subtrahieren Sie sie von 1.

 --notj: Calc (1-var (-j));

If --j ist 0, --notj wird 1; If --j ist 1, --notj ist 0.

Und Betrieb

Die und Operation gibt nur dann den wahren Renditen zurück, wenn beide Operanden wahr sind. Für Switch -Variablen ( --k und --i ) erreicht die Multiplikation dies:

 -und: Calc (var (-k) * var (-i));

Dies ergibt 1 nur dann, wenn beide --k und --i sind 1; Ansonsten ist es 0.

NAND -Operation (nicht und)

Nand ist die Negation von und:

 --Nand: Calc (1-var (-k) * var (-i));

Oder Betrieb

Der OR -Betrieb ist wahr, wenn mindestens ein Operand wahr ist. Unter Verwendung von De Morgans Gesetz ( not (A or B) = (not A) and (not B) ) erhalten wir:

 -oder: calc (1-(1-var (-k)) * (1-var (-i)));

Noch Operation (nicht oder)

Auch ist die Negation von OR:

 --Nor: Calc ((1-var (-k)) * (1-var (-i)));

XOR -Betrieb (exklusiv oder)

XOR ist wahr, wenn genau ein Operand wahr ist. Subtrahieren Sie die Variablen und das Quadrieren des Ergebnisses liefert den absoluten Wert und liefert das gewünschte Ergebnis von 0 oder 1:

 --xor: calc ((var (-k)-var (-i)) * (var (-k)-var (-i)));

Praktische Anwendungen

Versteckt ein behindertes Feld auf kleinen Bildschirmen

Dieses Beispiel zeigt ein deaktiviertes erweitertes Steuerungsfeld, das nur auf größeren Bildschirmen sichtbar sein sollte.

HTML (veranschaulichend):

<div class="advanced">
  
</div>
<input type="checkbox" id="toggle">

CSS:

 Körper {
  -K: var (-breit, 0); / * Schalter für Bildschirmgröße */
  Anzeige: Flex;
  Flex-Richtung: var (-breit, Spalte);
  @media (Min-Width: 768px) {-Wide: 1; } / * Breakpoint nach Bedarf einstellen * /
}

.fortschrittlich {
  --i: var (-aktiviert, 0); / * Switch für aktiviertes Status */
  --Noti: Calc (1-var (-i));
  Filter: Kontrast (calc (1-var (-noti) * 0,9)) Opazität (Calc (1-var (-Noti) * 0,7));
  Zeiger-Events: var (-aktiviert, keine);
  Rand: calc (var (-oder) * 20px) 0; / * Beispiel Margin */
  Höhe: Calc (var (-oder) * 200px); / * Beispielhöhe */
  [id = 'Toggle']: Checked ~ & { -enabled: 1; }
  -oder: calc (1-(1-var (-k)) * (1-var (-i))); / * Oder Operation */
}

Dadurch wird der OR -Betrieb ( --or ) verwendet, um das Feld anzuzeigen, wenn der Bildschirm breit ist ( --k ist 1) oder das Feld aktiviert ist ( --i ist 1).

Positionierung von Gesichtern einer 3D -Form (komplexes Beispiel)

Das zweite Beispiel, das eine komplexe 3D -Form beinhaltet, zeigt eine fortgeschrittenere Verwendung logischer Operationen für eine präzise Gesichtspositionierung. Aufgrund seiner Komplexität wird dieses Beispiel für die Kürze weggelassen. Der Originaltext enthält eine detaillierte Erklärung und interaktive Demos, die diesen Anwendungsfall veranschaulicht. Das Kernkonzept bleibt gleich: Verwenden Sie calc() und logische Operationen (und oder, nicht Xor, NAND, NOR), um Transformationen basierend auf den Switch -Variablenzuständen bedingt anzuwenden.

Das obige ist der detaillierte Inhalt vonLogische Operationen mit CSS -Variablen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!