Membuat Stopwatch menggunakan CSS

Membuat Stopwatch menggunakan CSS

  02 January    Andika

---

Stopwatch adalah sebuah CSS sederhana yang memiliki kemampuan untuk menghitung waktu mulai dari Start, Stop hingga Reset. Walau hanya bermodal CSS, tampilannya sangat mirip dengan Stopwatch sungguhan.

Untuk animasi penghitungnya di serahkan kepada keyframes.

Langsung saja, berikut hasilnya.

Kode CSS Stopwatchnya

.container {
  padding:200px;
  text-align:center;
}

.timer {
  padding:10px;
  background:linear-gradient(top,#222,#444);
  overflow:hidden;
  display:inline-block;
  border:7px solid #efefef;
  border-radius:5px;
  position:relative;
  box-shadow:inset 0 -2px 10px 1px rgba(0,0,0,0.75),0 5px 20px -10px rgba(0,0,0,1);
}

.cell {
  width:0.60em;
  height:40px;
  font-size:50px;
  overflow:hidden;
  position:relative;
  float:left;
}

.numbers {
  width:0.8em;
  line-height:40px;
  font-family:digital;
  text-align:center;
  color:#333;
  position:absolute;
  top:0;
  left:0;
  text-shadow:0 0 5px rgba(255,255,255,1);
}


#timer_controls label {
  cursor:pointer;
  padding:18px 10px 6px;
  background:#efefef;
  font-family:arial,verdana,tahoma;
  font-size:12px;
  border-radius:0 0 3px 3px;
}

input[name="controls"] {
  display:none;
}

#stop:checked~.timer .numbers {
  animation-play-state:paused;
}

#start:checked~.timer .numbers {
  animation-play-state:running;
}

#reset:checked~.timer .numbers {
  animation:none;
}

.moveten {
  animation:moveten 1s steps(10,end) infinite;
  animation-play-state:paused;
}

.movesix {
  animation:movesix 1s steps(6,end) infinite;
  animation-play-state:paused;
}

.second {
  animation-duration:10s;
}

.tensecond {
  animation-duration:60s;
}

.milisecond {
  animation-duration:1s;
}

.tenmilisecond {
  animation-duration:0.1s;
}

.hundredmilisecond {
  animation-duration:0.01s;
}

.minute {
  animation-duration:600s;
}

.tenminute {
  animation-duration:3600s;
}

.hour {
  animation-duration:36000s;
}

.tenhour {
  animation-duration:360000s;
}

@keyframes moveten {
  0% {
    top:0;
  }
  100% {
    top:-400px;
  }
}

@keyframes movesix {
  0% {
    top:0;
  }
  100% {
    top:-240px;
  }
}

Kode HTMLnya

<div class="container">
    <input id="start" name="controls" type="radio" />
    <input id="stop" name="controls" type="radio" />
    <input id="reset" name="controls" type="radio" />
    <div class="timer">
        <div class="cell">
            <div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
        </div>
        <div class="cell">
            <div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
        </div>
        <div class="cell divider"><div class="numbers">:</div></div>
        <div class="cell">
            <div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
        </div>
        <div class="cell">
            <div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
        </div>
        <div class="cell divider"><div class="numbers">:</div></div>
        <div class="cell">
            <div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
        </div>
        <div class="cell">
            <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
        </div>
        <div class="cell divider"><div class="numbers">:</div></div>
        <div class="cell">
            <div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
        </div>
        <div class="cell">
            <div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
        </div>
        <div class="cell">
            <div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
        </div>
    </div>
    <div id="timer_controls">
        <label for="start">Start</label>
        <label for="stop">Stop</label>
        <label for="reset">Reset</label>
    </div>
</div>

Animasi dan CSS sudah saya uji coba dan mampu bekerja dengan baik pada browser Mozilla Firefox, Internet Explorer 11 dan Google Chrome!