GINPRO / SQLの窓と銀プログラマ

<style>
ul { list-style:none; margin:0; padding:0 }
#watch {
	width: 600px; 
	font-size:1em; 
	position:relative 
}
#watch .frame-face {
  position:relative;
  width:30em;
  height:30em;
  margin:2em auto;
  border-radius:15em;
  background:-webkit-linear-gradient(top, #f9f9f9,#666);
  background:-moz-linear-gradient(top, #f9f9f9,#666);
  background:linear-gradient(to bottom, #f9f9f9,#666);
  box-shadow:rgba(0,0,0,.8) .5em .5em 4em;
}

/* 白い背景 */
#watch .frame-face:after {
  content:'';
  width:28em;
  height:28em;
  border-radius:14.2em;
  position:absolute;
  top:.9em; left:.9em;
  box-shadow:inset rgba(0,0,0,.2) .2em .2em 1em;
  border:.1em solid rgba(0,0,0,.2);
  background:-webkit-linear-gradient(top, #fff, #ccc);
  background:-moz-linear-gradient(top, #fff, #ccc);
  background:linear-gradient(to bottom, #fff, #ccc);
}

/* 分目盛り */
#watch .minute-marks li {
  display:block;
  width:.2em;
  height:.6em;
  background:#929394;
  position:absolute;
  top:50%; left:50%;
  margin:-.4em 0 0 -.1em;
}


/* ５分単位の数字 */
#watch .digits li {
  font-size:1.6em;
  display:block;
  width:1.6em;
  height:1.6em;
  position:absolute;
  top:50%; left:50%;
  line-height:1.6em;
  text-align:center;
  margin:-.8em 0 0 -.8em;
  font-weight:bold;
}
#watch .digits li:nth-child(1) { transform:translate(3.9em, -6.9em) }
#watch .digits li:nth-child(2) { transform:translate(6.9em, -4em) }
#watch .digits li:nth-child(3) { transform:translate(8em, 0) }
#watch .digits li:nth-child(4) { transform:translate(6.8em, 4em) }
#watch .digits li:nth-child(5) { transform:translate(3.9em, 6.9em) }
#watch .digits li:nth-child(6) { transform:translate(0, 8em) }
#watch .digits li:nth-child(7) { transform:translate(-3.9em, 6.9em) }
#watch .digits li:nth-child(8) { transform:translate(-6.8em, 4em) }
#watch .digits li:nth-child(9) { transform:translate(-8em, 0) }
#watch .digits li:nth-child(10) { transform:translate(-6.9em, -4em) }
#watch .digits li:nth-child(11) { transform:translate(-3.9em, -6.9em) }
#watch .digits li:nth-child(12) { transform:translate(0, -8em) }

/* 短針 */
#watch .hours-hand {
  transform:rotate(90deg);

  width:.8em;
  height:7em;
  border-radius:0 0 .9em .9em;
  background:#232425;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -.8em -.4em;
  box-shadow:#232425 0 0 2px;
  transform-origin:0.4em 6.2em;
  animation:hours 43200s linear 0s infinite;
}
#watch .hours-hand:before {
  content:'';
  background:inherit;
  width:1.8em;
  height:.8em;
  border-radius:0 0 .8em .8em;
  box-shadow:#232425 0 0 1px;
  position:absolute;
  top:-.7em; left:-.5em;
}
#watch .hours-hand:after {
  content:'';
  width:0; height:0;
  border:.9em solid #232425;
  border-width:0 .9em 2.4em .9em;
  border-left-color:transparent;
  border-right-color:transparent;
  position:absolute;
  top:-3.1em; left:-.5em;
}

/* 長針 */
#watch .minutes-hand {
  transform:rotate(0deg);

  width:.8em;
  height:12.5em;
  border-radius:.5em;
  background:#343536;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -1.5em -.4em;
  box-shadow:#343536 0 0 2px;
  transform-origin:0.4em 11em;
  animation:minutes 3600s linear 0s infinite;
}

/* 秒針 */
#watch .seconds-hand {
  transform:rotate(90deg);

  width:.2em;
  height:14em;
  border-radius:.1em .1em 0 0/10em 10em 0 0;
  background:#c00;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -2em -.1em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  transform-origin:0.1em 12em;
  animation:seconds 60s steps(60, end) 0s infinite;
}
#watch .seconds-hand:before {
  content:'';
  width:.8em;
  height:3em;
  border-radius:.2em .2em .4em .4em/.2em .2em 2em 2em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  background:inherit;
  position:absolute;
  left:-.35em; bottom:-3em;
}

/* デシタル部分 */
#watch .digital-wrap {
  width:9em;
  height:3em;
  position:absolute;
  top:50%; left:50%;
  margin:3em 0 0 -4.5em;
  overflow:hidden;
}
</style>
<div id="watch">
  <div class="frame-face"></div>
  <ul class="minute-marks">
  </ul>
  <div class="digital-wrap">
  </div>
  <ul class="digits">
    <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
    <li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>
  </ul>
  <div class="hours-hand"></div>
  <div class="minutes-hand"></div>
  <div class="seconds-hand"></div>
</div>