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>