Zahlenanimation, das heißt, stellen Sie sich vor, eine Zahl ändert sich von 1 zu 2, dann von 2 zu 3, dann von 3 zu 4 usw. über eine bestimmte Zeit. Wie ein Zähler, aber gesteuert durch die gleiche Art von Animation, die wir für ... verwenden.
Angenommen, Sie haben fünf Schaltflächen. Jede Schaltfläche ist ein Schritt. Wenn Sie auf die vierte Schaltfläche klicken, befinden Sie sich bei Schritt 4 von 5 und möchten dies anzeigen.
Dieses Zählen und Anzeigen könnte fest codiert sein, aber das ist ...
Ich brauchte eine nummerierte Liste von Blogbeiträgen, die mit der letzten/höchsten zuerst und von dort abwärts aufgelistet wird. So
5. Post Title
4. Post Title
3. Post Title
2. Post Title
1. Post TitleAber das obige …
Wie wäre es mit einem klassischen CSS-Trick! Das Erstellen von benutzerdefinierten Styles für Listen ist mittlerweile gar nicht mehr so schwierig, da CSS-Zähler counter-increment und counter-reset eingeführt haben, was perfekt dafür ist. Ich wollte nur sicherstellen, dass du weißt, wie...
In diesem Beitrag demonstrieren wir, wie wir die quellcodeunabhängige Anordnung von CSS Grid nutzen können, um ein Layoutproblem zu lösen, das sich aus einer Einschränkung der Quellcodeanordnung ergibt. Insbesondere betrachten wir Checkboxen und CSS-Zähler – zwei Konzepte, die bei der gemeinsamen Verwendung von der Quellcodeanordnung abhängen.
Geordnete Listen sind nicht die einzigen Elemente, die automatisch nummeriert werden können. Dank der verschiedenen zählerbezogenen Eigenschaften kann jedes Element das.
<body>
<section></section>
<section></section>
<section></section>
<section></section>
</body>body {
counter-reset: my-awesome-counter;
}
section {
counter-increment: my-awesome-counter;
}
section:before {
content: 