HTML5/CSS3圆盘秒表动画 秒表可暂停计时

本文作者html5tricks,转载请注明出处

关于HTML5和CSS3的时钟应用在之前我们已经分享过不少了,还有一些HTML5的日期选择应用。今天我们要分享一款基于HTML5和CSS3的圆盘秒表动画,秒表可以精确到0.001秒,并且可以在计时过程中暂停计时,同时秒表可以随时重置。

html5-css3-stop-watch

下面来分析一下实现的源代码,主要由HTML和CSS代码组成,CSS相对比较复杂,因为涉及到动画。

HTML代码:

<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>

这里主要是定义了圆盘时钟的基本结构,以及开始、暂停和复位按钮。接下来重点是CSS代码:

CSS代码:

首先来定义一些动画:

@-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;}}

再将这些动画在各个按钮被激活时启用这些动画:

.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;}

在线演示源码下载

扫描下方二维码关注公众号

发送消息 jymm 获取 解压密码

分享HTML5/CSS3技术;jQuery插件;Vue、React等前端开发组件

热门推荐

HTML5/CSS3圆盘秒表动画 秒表可暂停计时》上有5条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>