37 ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠΎΠ²
π ΠΡΡΠΈΡΠ»Π΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ
ΠΠΎΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π² Π²ΠΈΠ΄Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ CSS Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΡΡΡΠΎΠΊ ΠΊΠΎΠ΄Π°
- Π Π°Π±ΠΎΡΠ°Π΅Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ
- ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π½Π° ΡΡΠΎΠ²Π½Π΅ :root (Π΄ΠΎΡΡΡΠΏΠ½ΠΎ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²)
- Π’ΠΈΠΏΠΈΠ·ΠΈΡΡΠ΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ @property
- ΠΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² Π»ΡΠ±ΠΎΠΉ ΡΠΎΡΠΌΡΠ»Π΅
@property --s {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
:root {
animation: scroll 1s linear;
animation-timeline: scroll();
}
@keyframes scroll {
to {--s: 100}
}
element:before {
content: counter(s) "%";
counter-reset: s var(--s);
}
#css
ΠΠΊΠΎΠ»ΠΎ ΠΌΠΈΠ½ΡΡΡ
24Β ΠΈΡΠ»ΡΒ 2024