Menggunakan nilai mutlak, tanda, pembulatan dan modulo dalam CSS hari ini

Penggunaan pintar fungsi matematik CSS: Simulasi abs (), tanda (), bulat () dan mod ()

Spesifikasi CSS mengandungi banyak fungsi matematik praktikal, seperti fungsi trigonometri, fungsi eksponen, fungsi korelasi simbolik (ABS (), tanda ()) dan fungsi nilai tangga (bulat (), mod (), REM ()). Walau bagaimanapun, fungsi ini tidak disokong oleh semua pelayar. Artikel ini akan memperkenalkan cara menggunakan ciri CSS sedia ada untuk mensimulasikan fungsi abs (), menandatangani (), bulat () dan mod () fungsi, dan menunjukkan kuasa dalam aplikasi praktikal.

Harus diingat bahawa teknologi berikut tidak direka untuk pelayar yang lebih tua. Sesetengah teknologi bergantung kepada sokongan penyemak imbas untuk pendaftaran atribut tersuai (menggunakan @Property), dan kini terutamanya terhad kepada pelayar Chromium.

Setara pengiraan simulasi

• --abs (abs)

Ia boleh dilaksanakan menggunakan fungsi max() CSS. Katakan anda mempunyai harta tersuai --a , yang nilainya mungkin positif atau negatif.

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

Jika --a positif, maka -1*var(--a) --a negatif, max() max() -1*var(--a) var(--a) -1*var(--a)

• --sign (simbol)

Menggunakan nilai mutlak, anda boleh mengira simbol nombor:

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

PENTING: Kaedah ini hanya sesuai untuk nilai unitless. Jika --a adalah 0, anda perlu menggunakan sokongan Houdini untuk mendaftarkan atribut --sign dan tetapkan nilai awal kepada 0:

 @Property - -sign {
  sintaks: '<integer> ';
  nilai awal: 0;
  Warisan: palsu;
}</integer>

Untuk bilangan bulat, anda boleh menggunakan fungsi clamp() untuk memudahkan:

 --sign: clamp (-1, var (-a), 1);

Kaedah ini hanya sesuai untuk bilangan bulat tanpa nilai unit dan nilai mutlak sekurang -kurangnya 1. Untuk perpuluhan, penambahbaikan diperlukan, seperti:

 --lim: .000001;
--sign: clamp (-1, var (-a)/var (-lim), 1);

• --round , --ceil dan --floor (bulat, bulat dan bulat)

Ini memerlukan mendaftarkan harta tersuai dan memaksa jenisnya ke integer:

 @Property -Round {
  sintaks: '<integer> ';
  nilai awal: 0;
  Warisan: palsu;
}

.my-elem {--round: var (-a);</integer>

--ceil dan --floor boleh dilaksanakan dengan menambahkan atau menolak 0.5:

 @Property -floor {
  sintaks: '<integer> ';
  nilai awal: 0;
  Warisan: palsu;
}

@Property --ceil {
  sintaks: '<integer> ';
  nilai awal: 0;
  Warisan: palsu;
}

.my-elem {
  --floor: calc (var (-a)-.5);
  --ceil: calc (var (-a) .5);
}</integer></integer>

• --mod (mod)

Berdasarkan -pelaksanaan --floor :

 @Property -floor {
  sintaks: '<integer> ';
  nilai awal: 0;
  Warisan: palsu;
}

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

Kes permohonan

• Kesan simetri dalam animasi

Nilai mutlak boleh digunakan untuk mewujudkan kelewatan animasi simetri:

 --m: calc (.5*(var (-n)-1));
--abs: max (var (-m)-var (-i), var (-i)-var (-m));
animasi-delay: calc (var (-abs)/var (-m)*#{$ t}) tak terhingga ke belakang;

• Laraskan gaya mengikut item yang dipilih

Anda boleh menggunakan fungsi simbolik untuk menentukan sama ada elemen sebelum atau selepas elemen dipilih, supaya gaya yang berbeza digunakan.

• Pemformatan masa

Anda boleh menggunakan fungsi floor() dan mod() untuk memformat masa:

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

Untuk lebih banyak kes, sila rujuk teks asal.

Singkatnya, dengan bijak menerapkan ciri -ciri CSS yang sedia ada, beberapa fungsi matematik boleh disimulasikan dan dilaksanakan, dengan itu mencapai kesan animasi dan gaya yang lebih kompleks dalam CSS tanpa bergantung pada JavaScript. Ini menyediakan ruang yang lebih luas untuk aplikasi kreatif CSS.

Atas ialah kandungan terperinci Menggunakan nilai mutlak, tanda, pembulatan dan modulo dalam CSS hari ini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!