CodePen Embed - Countdown clock

<section class="clock">
	<div id="digit-10" class="digit">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
	</div>
	<div id="digit-9" class="digit">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
	</div>
	<div id="digit-8" class="digit">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
	</div>
	<div id="digit-7" class="digit">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
	</div>
	<div id="digit-6" class="digit">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
	</div>
	<div id="digit-5" class="digit">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
	</div>
	<div id="digit-4" class="digit">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
	</div>
	<div id="digit-3" class="digit">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
	</div>
	<div id="digit-2" class="digit">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
	</div>
	<div id="digit-1" class="digit">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
	</div>
	<div id="digit-0" class="digit">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
	</div>
</section>

$accent: hsl(2, 75%, 64%)
$dark: hsl(hue($accent), 7%, 14%)
$medium: hsl(hue($accent), 8%, 46%)
$light: hsl(hue($accent), 30%, 79%)
$white: hsl(0, 0%, 100%)
$black: hsl(0, 0%, 0%)

$cell-size: 18px
$cell-margin: 2px
$digit-margin: 10px

html, body
  background-color: $accent

.clock
  font-size: 0
  text-align: center
  margin-top: 20px
  .digit
    display: inline-block
    width: ($cell-size * 4 + $cell-margin * 8)
    margin: $digit-margin
    transform: skewX(-2deg)
    &#digit-2
      .cell
        transition: opacity 50ms ease
    &#digit-3,
    &#digit-4,
    &#digit-5,
    &#digit-6,
    &#digit-7,
    &#digit-8,
    &#digit-9,
    &#digit-10,
    &#digit-11
      .cell
        transition: opacity 100ms ease
    .cell
      width: $cell-size
      height: $cell-size
      margin: $cell-margin
      background-color: $white
      border-radius: 2px
      display: inline-block
      opacity: 0.1
      &.on
        opacity: 1

View Compiled

var grad = new Date(2065, 3, 16, 17, 0, 0, 0, 0),
  digit0 = $('#digit-0');
  digit1 = $('#digit-1'),
  digit2 = $('#digit-2'),
  digit3 = $('#digit-3'),
  digit4 = $('#digit-4'),
  digit5 = $('#digit-5'),
  digit6 = $('#digit-6'),
  digit7 = $('#digit-7'),
  digit8 = $('#digit-8'),
  digit9 = $('#digit-9'),
  digit10 = $('#digit-10');

function renderDigit(container, number) {
  var matrix;
  switch(number) {
    case 0:
      matrix = [
        true, true, true, true,
        true, false, false, true,
        true, false, false, true,
        true, false, false, true,
        true, false, false, true,
        true, false, false, true,
        true, true, true, true
      ];
      break;
    case 1:
      matrix = [
        false, false, false, true,
        false, false, false, true,
        false, false, false, true,
        false, false, false, true,
        false, false, false, true,
        false, false, false, true,
        false, false, false, true
      ];
      break;
    case 2:
      matrix = [
        true, true, true, true,
        false, false, false, true,
        false, false, false, true,
        true, true, true, true,
        true, false, false, false,
        true, false, false, false,
        true, true, true, true
      ];
      break;
    case 3:
      matrix = [
        true, true, true, true,
        false, false, false, true,
        false, false, false, true,
        false, true, true, true,
        false, false, false, true,
        false, false, false, true,
        true, true, true, true
      ];
      break;
    case 4:
      matrix = [
        true, false, false, false,
        true, false, false, true,
        true, false, false, true,
        true, true, true, true,
        false, false, false, true,
        false, false, false, true,
        false, false, false, true
      ];
      break;
    case 5:
      matrix = [
        true, true, true, true,
        true, false, false, false,
        true, false, false, false,
        true, true, true, true,
        false, false, false, true,
        false, false, false, true,
        true, true, true, true
      ];
      break;
    case 6:
      matrix = [
        true, true, true, true,
        true, false, false, false,
        true, false, false, false,
        true, true, true, true,
        true, false, false, true,
        true, false, false, true,
        true, true, true, true
      ];
      break;
    case 7:
      matrix = [
        true, true, true, true,
        true, false, false, true,
        false, false, false, true,
        false, false, false, true,
        false, false, false, true,
        false, false, false, true,
        false, false, false, true
      ];
      break;
    case 8:
      matrix = [
        true, true, true, true,
        true, false, false, true,
        true, false, false, true,
        true, true, true, true,
        true, false, false, true,
        true, false, false, true,
        true, true, true, true
      ];
      break;
    case 9:
      matrix = [
        true, true, true, true,
        true, false, false, true,
        true, false, false, true,
        true, true, true, true,
        false, false, false, true,
        false, false, false, true,
        false, false, false, true
      ];
      break;
  }
  var children = container.children();
  var len = matrix.length;
  for (var i = 0; i < len; i++) {
    children.eq(i).toggleClass('on', matrix[i]);
  }
}

function render() {
  var now = new Date(),
    diff = String(grad.getTime() - now.getTime()),
    len = diff.length;
  renderDigit(digit0, Number(diff.charAt(len-1)));
  renderDigit(digit1, Number(diff.charAt(len-2)));
  renderDigit(digit2, Number(diff.charAt(len-3)));
  renderDigit(digit3, Number(diff.charAt(len-4)));
  renderDigit(digit4, Number(diff.charAt(len-5)));
  renderDigit(digit5, Number(diff.charAt(len-6)));
  renderDigit(digit6, Number(diff.charAt(len-7)));
  renderDigit(digit7, Number(diff.charAt(len-8)));
  renderDigit(digit8, Number(diff.charAt(len-9)));
  renderDigit(digit9, Number(diff.charAt(len-10)));
  renderDigit(digit10, Number(diff.charAt(len-11)));
  requestAnimationFrame(render);
}

requestAnimationFrame(render);

This Pen is owned by Matt Swensen on CodePen.

See more by @mjswensen on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js