今日のCSSで絶対値、サイン、丸め、モジュロを使用する

CSS数学機能の巧妙な使用：abs（）、sign（）、round（）、およびmod（）をシミュレートします

CSS仕様には、三角関数、指数関数、シンボリック相関関数（abs（）、sign（））、ラダー値関数（round（）、mod（）、rem（））など、多くの実用的な数学関数が含まれています。ただし、これらの機能はすべてのブラウザではサポートされていません。この記事では、既存のCSS機能を使用して、abs（）、sign（）、round（）、およびmod（）関数の関数をシミュレートし、実際のアプリケーションでそのパワーを実証する方法を紹介します。

以下のテクノロジーは、古いブラウザ向けに設計されていないことに注意する必要があります。一部のテクノロジーは、カスタム属性登録（@Propertyを使用）のブラウザサポートに依存しており、現在は主にChromiumブラウザーに限定されています。

シミュレーション計算相当

• --abs （ABS）

CSSのmax()関数を使用して実装できます。カスタムプロパティがあるとします--aその値は正または否定的である可能性があります。次の方法を使用できます。

 -abs：max（var（ -  a）、-1*var（ -  a））;

--aが正である場合、 -1*var(--a) --a max() -1*var(--a) var(--a) max() -1*var(--a)を返します。

• --sign （シンボル）

絶対値を使用して、数字のシンボルを計算できます。

 -abs：max（var（ -  a）、-1*var（ -  a））;
 -  sign：calc（var（ -  a）/var（ -  abs））;

重要：この方法は、単位のない値にのみ適しています。 --aが0の場合、houdiniサポートを使用して--sign属性を登録し、初期値を0に設定する必要があります。

 @property  -  sign {
  構文： '<integer> ';
  初期値：0;
  継承：false;
}</integer>

整数の場合、 clamp()関数を使用して単純化できます。

 -  sign：クランプ（-1、var（ -  a）、1）;

この方法は、単位値がなく、少なくとも1の絶対値を持つ整数にのみ適しています。デシマルの場合、次のような改善が必要です。

 -lim：.000001;
 -  sign：クランプ（-1、var（ -  a）/var（ -  lim）、1）;

• --round 、 --ceilおよび--floor （丸み、丸みを帯び、丸みを帯びています）

これには、カスタムプロパティを登録し、そのタイプを整数に強制する必要があります。

 @Property  - ラウンド{
  構文： '<integer> ';
  初期値：0;
  継承：false;
}

.My-Elem { - ラウンド：var（ -  a）;</integer>

--ceilおよび--floor 、0.5を追加または減算することで実装できます。

 @property  -  floor {
  構文： '<integer> ';
  初期値：0;
  継承：false;
}

@property -ceil {
  構文： '<integer> ';
  初期値：0;
  継承：false;
}

.My-Elem {
   -  floor：calc（var（ -  a） -  .5）;
  -CEIL：calc（var（ -  a）.5）;
}</integer></integer>

• --mod （mod）

--floor実装に基づいて：

 @property  -  floor {
  構文： '<integer> ';
  初期値：0;
  継承：false;
}

.My-Elem {
   -  floor：calc（var（ -  a）/var（ -  b） -  .5）;
   -  mod：calc（var（ -  a） -  var（ -  b）*var（ -  floor））;
}</integer>

アプリケーションケース

• アニメーションの対称効果

絶対値を使用して、対称アニメーションの遅延を作成できます。

 - -m：calc（.5*（var（ -  n）-1））;
-abs：max（var（ -  m） -  var（ -  i）、var（ -  i） -  var（ -  m））;
Animation-Delay：calc（var（ -  abs）/var（ -  m）*＃{$ t}）backwards;

• 選択したアイテムに従ってスタイルを調整します

シンボリック関数を使用して、要素が選択された前か後に要素があるかどうかを判断して、異なるスタイルが適用されるようにできます。

• 時間のフォーマット

floor()およびmod()関数を使用して、時間をフォーマットできます。

 -  min：max（0、var（ -  val）/60-.5）;
 -  sec：calc（var（ -  val） -  var（ -  min）*60）;

その他の場合は、元のテキストを参照してください。

要するに、CSSの既存の機能を巧みに適用することにより、いくつかの数学的関数をシミュレートして実装することができ、それにより、JavaScriptに依存することなくCSSでより複雑なアニメーションとスタイル効果を実現できます。 これにより、CSSの創造的なアプリケーションのためのより広範なスペースが提供されます。

以上が今日のCSSで絶対値、サイン、丸め、モジュロを使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。