Verwenden Sie heute absolute Wert, Zeichen, Rundung und Modulo in CSS

Clevere Verwendung von Mathematischen Funktionen von CSS: Simulieren Sie ABS (), Sign (), Round () und Mod ()

Die CSS -Spezifikation enthält viele praktische mathematische Funktionen, wie z. Diese Funktionen werden jedoch nicht von allen Browsern unterstützt. In diesem Artikel werden vorhandene CSS -Funktionen verwendet, um die Funktionen von ABS (), Sign (), Round () und Mod () zu simulieren und seine Leistung in praktischen Anwendungen zu demonstrieren.

Es ist zu beachten, dass die folgenden Technologien nicht für ältere Browser ausgelegt sind. Einige Technologien stützen sich auf die Browser -Unterstützung für die benutzerdefinierte Attributregistrierung (mit @Property) und sind derzeit hauptsächlich auf Chromiumbrowser beschränkt.

Simulationsberechnungsäquivalente

• --abs (ABS)

Es kann mit der max() -Funktion von CSS implementiert werden. Angenommen, Sie haben eine benutzerdefinierte Eigenschaft --a , dessen Wert positiv oder negativ sein kann.

 --abs: max (var (-a), -1*var (-a));

Wenn --a positiv ist, dann ist -1*var(--a) --a max() max() -1*var(--a) -1*var(--a) var(--a) ;

• --sign (Symbol)

Mit Absolutwerten können Sie das Symbol einer Zahl berechnen:

 --abs: max (var (-a), -1*var (-a));
-Sign: calc (var (-a)/var (-abs));

WICHTIG: Diese Methode ist nur für unitlose Werte geeignet. Wenn --a ist 0, müssen Sie Houdini --sign verwenden, um das Attribut zu registrieren und den Anfangswert auf 0 festlegen:

 @property -sign {
  Syntax: '<integer> ';
  Anfangswert: 0;
  Erben: Falsch;
}</integer>

Für Ganzzahlen können Sie clamp() verwenden, um zu vereinfachen:

 -Sign: Clamp (-1, var (-a), 1);

Diese Methode ist nur für Ganzzahlen ohne Einheitswert und einen absoluten Wert von mindestens 1 geeignet. Für Dezimalstellen sind Verbesserungen erforderlich, wie z. B.:

 -Lim: .000001;
-Sign: Clamp (-1, var (-a)/var (-lim), 1);

• --round , --ceil und --floor (abgerundet, abgerundet und abgerundet)

Dies erfordert die Registrierung einer benutzerdefinierten Eigenschaft und das Erzwingen ihrer Art zu einer Ganzzahl:

 @Property --Round {
  Syntax: '<integer> ';
  Anfangswert: 0;
  Erben: Falsch;
}

.My-Elem {-Round: var (-a);</integer>

--ceil und --floor können durch Hinzufügen oder Subtrahieren von 0,5 implementiert werden:

 @Property --Foor {
  Syntax: '<integer> ';
  Anfangswert: 0;
  Erben: Falsch;
}

@property -Ceil {
  Syntax: '<integer> ';
  Anfangswert: 0;
  Erben: Falsch;
}

.My-Elem {
  --floor: calc (var (-a)-.5);
  -CAL: Calc (var (-a) .5);
}</integer></integer>

• --mod (mod)

Basierend auf --floor -Implementierung:

 @Property --Foor {
  Syntax: '<integer> ';
  Anfangswert: 0;
  Erben: Falsch;
}

.My-Elem {
  --floor: calc (var (-a)/var (-b)-.5);
  --mod: calc (var (-a)-var (-b)*var (-floor));
}</integer>

Anwendungsfälle

• Symmetrische Effekte bei der Animation

Absolute Werte können verwendet werden, um symmetrische Animationsverzögerungen zu erstellen:

 --m: calc (.5*(var (-n)-1));
--abs: max (var (-m)-var (-i), var (-i)-var (-m));
Animation-Delay: calc (var (-abs)/var (-m)*#{$ t}) Infinite rückwärts;

• Passen Sie den Stil entsprechend dem ausgewählten Element an

Sie können symbolische Funktionen verwenden, um festzustellen, ob sich ein Element vor oder nach dem Auswahl des Elements befindet, damit verschiedene Stile angewendet werden.

• Zeitformatierung

Sie können floor() und mod() Funktionen verwenden, um die Zeit zu formatieren:

 -Min: max (0, var (-val)/60-.5);
--sec: calc (var (-val)-var (-min)*60);

Weitere Fälle finden Sie im Originaltext.

Kurz gesagt, indem die vorhandenen Merkmale von CSS geschickt angewendet werden, können einige mathematische Funktionen simuliert und implementiert werden, wodurch komplexere Animations- und Stileffekte in CSS erzielt werden, ohne sich auf JavaScript zu verlassen. Dies bietet einen breiteren Raum für kreative Anwendungen von CSS.

Das obige ist der detaillierte Inhalt vonVerwenden Sie heute absolute Wert, Zeichen, Rundung und Modulo in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!