basti1012.bplaced.net

Einen Counter, der nur mit CSS funktioniert

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>