Css Counter

Einen Counter, der nur mit CSS funktioniert

Der hier verwendete Code

<style> main{ display:flex; width:calc(400px + 16px); height:100px; overflow:hidden; border:2px solid green; } main div{ display:flex; flex-direction:column; width:100px; height:1000px; } .zahl{ width:100px; height:100px; display:block; font-size:50px; line-height:100px; text-align:center; } #pos4{ animation:einer 9s forwards infinite; } #pos3{ animation:einer 90s forwards infinite; } #pos2{ animation:einer 900s forwards infinite; } #pos1{ animation:einer 9000s forwards infinite; } @keyframes einer{ 0%,9.9%{ margin-top:0; } 10%,19.9%{ margin-top:-100px; } 20%,29.9%{ margin-top:-200px; } 30%,39.9%{ margin-top:-300px; } 40%,49.9%{ margin-top:-400px; } 50%,59.9%{ margin-top:-500px; } 60%,69.9%{ margin-top:-600px; } 70%,79.9%{ margin-top:-700px; } 80%,89.9%{ margin-top:-800px; } 90%,99.9%{ margin-top:-900px; } 100%{ margin-top:-1000px; } } </style> <main> <div id="pos1" class="alles"> <span class="zahl">0</span> <span class="zahl">1</span> <span class="zahl">2</span> <span class="zahl">3</span> <span class="zahl">4</span> <span class="zahl">5</span> <span class="zahl">6</span> <span class="zahl">7</span> <span class="zahl">8</span> <span class="zahl">9</span> </div> <div id="pos2" class="alles"> <span class="zahl">0</span> <span class="zahl">1</span> <span class="zahl">2</span> <span class="zahl">3</span> <span class="zahl">4</span> <span class="zahl">5</span> <span class="zahl">6</span> <span class="zahl">7</span> <span class="zahl">8</span> <span class="zahl">9</span> </div> <div id="pos3" class="alles"> <span class="zahl">0</span> <span class="zahl">1</span> <span class="zahl">2</span> <span class="zahl">3</span> <span class="zahl">4</span> <span class="zahl">5</span> <span class="zahl">6</span> <span class="zahl">7</span> <span class="zahl">8</span> <span class="zahl">9</span> </div> <div id="pos4" class="alles"> <span class="zahl">0</span> <span class="zahl">1</span> <span class="zahl">2</span> <span class="zahl">3</span> <span class="zahl">4</span> <span class="zahl">5</span> <span class="zahl">6</span> <span class="zahl">7</span> <span class="zahl">8</span> <span class="zahl">9</span> </div> </main>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!