漂亮的时钟

HTML

<div id="clock">
    <div id="hour" class="hands"></div>
    <div id="minute" class="hands"></div>
    <div id="second" class="hands"></div>
</div>

JS

// Let's make the hands interactive now
(function() {
  var updateTime=function() {
      var date=new Date();
      var hours=date.getHours();
      var minutes=date.getMinutes();
      var seconds=date.getSeconds();

      // based on the hours, minutes and seconds
      // we need to figure out, by how many degrees
      // to rotate the hands.
      // for minutes and seconds, its easy.
      var minute_degrees=minutes * 6;
      var second_degrees=seconds * 6;

      // for hours, its a bit tricky
      // 12 hours - 360 deg
      // x hours - 30x deg
      // but the hour hand also moves
      // when minutes passes
      // 60 minutes - 30 deg
      // y minutes - y/2 deg
      // So, the formula will be
      // h_d = 30x + y/2
      var hour_degrees=hours*30 + minutes/2;

      // Lets form the CSS value strings
      // that we can simply pass on to the
      // transform CSS property.
      var hour_rotate='rotate('+hour_degrees+'deg)';
      var minute_rotate='rotate('+minute_degrees+'deg)';
      var second_rotate='rotate('+second_degrees+'deg)';

      // We need to take care of vendors :(
      var vendors=['-webkit-', '-moz-', '-ms-', '-o-', ''];
      vendors.forEach(function(v, i, arr) {
          var prop=v + 'transform';
          document .querySelector('#hour') .style[prop]=hour_rotate;
          document .querySelector('#minute') .style[prop]=minute_rotate;
          document .querySelector('#second') .style[prop]=second_rotate;
      });
  };

  // Time is updating :D
  // Need to run it on an interval now ;)
  // SUPER! We are the master coders now
  // Finally, we'll now style the hands
  // to make them look pretty...
  setInterval(updateTime, 1000);
}());

CSS

/* onto the css now */
html,
body {
  width: 100%;
  height: 100%;
}

body {
  background: radial-gradient(circle at center 50px,
      rgba(199, 194, 190, 0.8),
      rgba(132, 121, 117, 1));

  background-attachment: fixed;
}

#clock {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 75px auto 0;
  background: #c2bdba;
  position: relative;

  box-shadow:
    inset 5px 5px 13px rgba(110, 103, 97, 0.8),
    inset 15px 15px 1px rgba(110, 103, 97, 0.35);
}

/* We'll use pseudo elements for cover's styling */

#clock:before,
#clock:after {
  position: absolute;
  border-radius: 50%;

  /* we do not want the pseudo elements to appear above */
  z-index: -1;
}

#clock:before {
  content: '';

  background: linear-gradient(135deg, #fff, #f0f0f0 15%, #7d7978);

  top: -40px;
  bottom: -40px;
  left: -40px;
  right: -40px;

  /* some box shadows would be nice */
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.4),
    5px 5px 13px rgba(110, 103, 97, 0.8),
    15px 15px 1px rgba(110, 103, 97, 0.3);
}

#clock:after {
  content: '';

  background: linear-gradient(135deg, #A6A5A3, #cccbc9, #fff);
  top: -20px;
  bottom: -20px;
  left: -20px;
  right: -20px;
}

/* woohoo! things are coming along nicely.

now we need to do the hands of the clock, i mean, style them. */

.hands {
  width: 3px;
  height: 47%;
  background: white;
  position: absolute;
  border-radius: 50%;
  left: 50%;
  top: 3%;

  /* We can use CSS3 tranforms to rotate the hands */
  transform: rotate(0deg);
  /* in order to make sure that the hands rotate along the center of the clock, we'll have to set the transform origin. it works bro! */
  transform-origin: bottom;
  /* same as bottom */
}

/* Common styling for all :before of all hands */
.hands:before {
  content: '';
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: -4px;
  right: -4px;
  border-radius: 50%;
  z-index: -1;
  opacity: 0.8;
}

.hands {
  background: linear-gradient(rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0.2) 60%,
      rgba(255, 255, 255, 0));
}

#hour:before {
  background: linear-gradient(#d7c2de,
      rgba(255, 255, 255, 0) 80%);
}

#minute:before {
  background: linear-gradient(#dff1ff,
      rgba(255, 255, 255, 0) 80%);
}

#second:before {
  background: linear-gradient(#dbdec2,
      rgba(255, 255, 255, 0) 80%);
}

/* And we're done, right ? */