HTML5 ultra-Cool stopwatch animation can pause and reset stopwatch,

HTML5 ultra-Cool stopwatch animation can pause and reset stopwatch,

We have already shared a lot about the clock applications of HTML5 and CSS3, as well as some HTML5 date selection applications. Today, we want to share a disc stopwatch Animation Based on HTML5 and CSS3. the stopwatch can be precise to 0.001 seconds, and the timer can be paused during the timing process, while the stopwatch can be reset at any time.

Online Demo

The source code is mainly composed of HTML and CSS code. CSS is relatively complicated because it involves animation.

HTML code:

<input id="help" name="controls" type="checkbox" />  <input id="settings" name="controls" type="checkbox" />  <input id="orange"  name="color" type="radio"  />  <input id="green"  name="color" type="radio" checked="checked" />  <div>    <input id="start" name="controls" type="radio" />    <input id="stop" name="controls" type="radio" />    <input id="reset" name="controls" type="radio" />    <div>      <div>        <div>        </div>      </div>      <div>        <div>          <div>            0 1 2 3 4 5 6 7 8 9          </div>        </div>        <div>          <div>            0 1 2 3 4 5 6 7 8 9          </div>        </div>        <div>          :        </div>        <div>          <div>            0 1 2 3 4 5          </div>        </div>        <div>          <div>            0 1 2 3 4 5 6 7 8 9          </div>        </div>        <div>          :        </div>        <div>          <div>            0 1 2 3 4 5          </div>        </div>        <div>          <div>            0 1 2 3 4 5 6 7 8 9          </div>        </div>        <div>          :        </div>        <div>          <div>            0 1 2 3 4 5 6 7 8 9          </div>        </div>        <div>          <div>            0 1 2 3 4 5 6 7 8 9          </div>        </div>        <div>          <div>            0 1 2 3 4 5 6 7 8 9          </div>        </div>      </div>      <div>        <label id="haptic" for="stop">        </label>        <label id="haptic2" for="start">        </label>        <label id="haptic3" for="reset">        </label>      </div>    </div>  </div>

The basic structure of the disc clock and the start, pause, and reset buttons are defined here. The following focuses on CSS code:

CSS code:

First, define some animations:

@-webkit-keyframes start_haptic {from { -webkit-transform:scale(.98)}to {}}@-webkit-keyframes stop_haptic {from { -webkit-transform:scale(.98)}to {}}@-webkit-keyframes reset_haptic {from { -webkit-transform:scale(.98)}to {}}@-webkit-keyframes launch {from { -webkit-transform:scale(1.2); opacity:0} to {}}@-webkit-keyframes info {from { -webkit-transform:scale(.8) translateY(100px); opacity:0} to {}}@-webkit-keyframes menu {from { -webkit-transform:scale(.9) translateY(-50px); opacity:0} to {}}@-webkit-keyframes reset {from {-webkit-transform:rotateZ(180deg);} 60%{ -webkit-transform:rotateZ(-30deg);} 70%{ -webkit-transform:rotateZ(10deg);} 80%{ -webkit-transform:rotateZ(-10deg);}to { -webkit-transform:rotateZ(0);}}@-webkit-keyframes arrow { from  { -webkit-transform: rotateZ(0deg);}to{-webkit-transform: rotateZ(360deg)}}@-webkit-keyframes sec{ from  { top:0px;}to{top:-300px;}}@-webkit-keyframes sec1{ from  { top:0px;}to{top:-180px;}}

Enable these animations when the buttons are activated:

.start:checked~.container .mil0{-webkit-animation-play-state:running;}.stop:checked~.container .mil0{-webkit-animation-play-state:paused;}.start:checked~.container .mil{-webkit-animation-play-state:running;}.stop:checked~.container .mil{-webkit-animation-play-state:paused;}.start:checked~.container .mil1{-webkit-animation-play-state:running;}.stop:checked~.container .mil1{-webkit-animation-play-state:paused;}.reset:checked~.container .mil1{-webkit-animation:none;top:0;transition:.2s;}.reset:checked~.container .mil0{-webkit-animation:none;top:0;transition:.2s;}.reset:checked~.container .mil{-webkit-animation:none;top:0;transition:.2s;}.start:checked~.container .sec{-webkit-animation-play-state:running;}.stop:checked~.container .sec{-webkit-animation-play-state:paused;}.reset:checked~.container .sec{-webkit-animation:none;top:0;transition:.2s;}.start:checked~.container .sec1{-webkit-animation-play-state:running;}.stop:checked~.container .sec1{-webkit-animation-play-state:paused;}.reset:checked~.container .sec1{-webkit-animation:none;top:0;transition:.2s;}.start:checked~.container .min{-webkit-animation-play-state:running;}.stop:checked~.container .min{-webkit-animation-play-state:paused;}.reset:checked~.container .min{-webkit-animation:none;top:0;transition:.2s;}.start:checked~.container .min1{-webkit-animation-play-state:running;}.stop:checked~.container .min1{-webkit-animation-play-state:paused;}.reset:checked~.container .min1{-webkit-animation:none;top:0;transition:.2s;}.start:checked~.container .arrow{-webkit-animation-play-state:running;}.stop:checked~.container .arrow{-webkit-animation-play-state:paused;}.reset:checked~.container .arrow{-webkit-animation:reset  .4s; -webkit-animation-fill-mode:forwards;}.controls{ height:60px;width:200px;margin:0 auto;  position:relative;  }.stop_,.start_{position:absolute; z-index:3; height:60px; width:80px; left:60px; transition:.2s; background-position:center center;background-repeat:no-repeat;}

Finally, add the source code together,>