<body>
		<div class="wrapper">
			<ul class="digit hours--1">
				<li class="item digit__item item--h item--1"></li>
				<li class="item digit__item item--v item--2"></li>
				<li class="item digit__item item--v item--3"></li>
				<li class="item digit__item item--h item--4"></li>
				<li class="item digit__item item--v item--5"></li>
				<li class="item digit__item item--v item--6"></li>
				<li class="item digit__item item--h item--7"></li>
			</ul>

			<ul class="digit hours--2">
				<li class="item digit__item item--h item--1"></li>
				<li class="item digit__item item--v item--2"></li>
				<li class="item digit__item item--v item--3"></li>
				<li class="item digit__item item--h item--4"></li>
				<li class="item digit__item item--v item--5"></li>
				<li class="item digit__item item--v item--6"></li>
				<li class="item digit__item item--h item--7"></li>
			</ul>

			<span class="dottes"></span>

			<ul class="digit min--0">
				<li class="item digit__item item--h item--1"></li>
				<li class="item digit__item item--v item--2"></li>
				<li class="item digit__item item--v item--3"></li>
				<li class="item digit__item item--h item--4"></li>
				<li class="item digit__item item--v item--5"></li>
				<li class="item digit__item item--v item--6"></li>
				<li class="item digit__item item--h item--7"></li>
			</ul>

			<ul class="digit min--1">
				<li class="item digit__item item--h item--1"></li>
				<li class="item digit__item item--v item--2"></li>
				<li class="item digit__item item--v item--3"></li>
				<li class="item digit__item item--h item--4"></li>
				<li class="item digit__item item--v item--5"></li>
				<li class="item digit__item item--v item--6"></li>
				<li class="item digit__item item--h item--7"></li>
			</ul>

			<ul class="digit digit--sec">
				<li class="item digit__item item--h item--1"></li>
				<li class="item digit__item item--v item--2"></li>
				<li class="item digit__item item--v item--3"></li>
				<li class="item digit__item item--h item--4"></li>
				<li class="item digit__item item--v item--5"></li>
				<li class="item digit__item item--v item--6"></li>
				<li class="item digit__item item--h item--7"></li>
			</ul>

			<ul class="digit digit--sec">
				<li class="item digit__item item--h item--1"></li>
				<li class="item digit__item item--v item--2"></li>
				<li class="item digit__item item--v item--3"></li>
				<li class="item digit__item item--h item--4"></li>
				<li class="item digit__item item--v item--5"></li>
				<li class="item digit__item item--v item--6"></li>
				<li class="item digit__item item--h item--7"></li>
			</ul>
		</div>
/* Base Styles
----------------------------------- */
BODY {
  height: 100%;
}

BODY {
  margin: 0;
  padding: 0;
  background: black;
  font-family: Arial;
  font-size: 16px;
}
@media (max-width: 800px), (max-height: 350px) {
  BODY {
    font-size: 12px;
  }
}
@media (max-width: 600px), (max-height: 250px) {
  BODY {
    font-size: 8px;
  }
}

UL {
  padding: 0;
  margin: 0;
}

LI {
  list-style: none;
}

.wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 12em;
  white-space: nowrap;
  text-align: center;
}
.wrapper:before {
  content: "";
  display: inline-block;
  height: 12em;
  width: 20px;
  vertical-align: middle;
}

/* Dottes
----------------------------------- */
.dottes {
  display: inline-block;
  width: 1em;
  margin: 0 1em;
  background: transparent !important;
  vertical-align: middle;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.dottes:before, .dottes:after {
  content: "";
  display: block;
  width: 1em;
  height: 0;
  border-bottom: 1em solid #151515;
  -webkit-transition: border-color 0.5s;
  transition: border-color 0.5s;
}
.dottes:before {
  margin-bottom: 2em;
}

/* Digit
----------------------------------- */
.digit {
  display: inline-block;
  width: 6em;
  margin: 0 1em;
  vertical-align: middle;
}

.digit__item {
  position: relative;
  -webkit-transition: background 0.5s;
  transition: background 0.5s;
}
.digit__item:before, .digit__item:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 0.5em solid transparent;
  -webkit-transition: border-color 0.5s;
  transition: border-color 0.5s;
}

.item--h {
  clear: both;
  width: 3.4em;
  height: 1em;
  margin: 0 auto;
}

.item--1:before, .item--1:after {
  border-bottom-color: transparent !important;
}
.item--1:before {
  left: -1em;
  border-left-color: transparent !important;
}
.item--1:after {
  right: -1em;
  border-right-color: transparent !important;
}

.item--4 {
  width: 3.4em;
  margin: 4em auto 0;
}
.item--4:before {
  left: -0.5em;
  border-left: 0;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}
.item--4:after {
  right: -0.5em;
  border-right: 0;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

.item--7:before, .item--7:after {
  border-top-color: transparent !important;
}
.item--7:before {
  left: -1em;
  border-left-color: transparent !important;
}
.item--7:after {
  right: -1em;
  border-right-color: transparent !important;
}

.item--v {
  float: left;
  width: 1em;
  height: 3.4em;
  margin: 0.3em 0;
}
.item--v:before {
  top: -1em;
}
.item--v:after {
  bottom: -1em;
}

.item--3,
.item--6 {
  float: right;
}

.item--2:before,
.item--5:before {
  border-top-color: transparent !important;
  border-right-color: transparent !important;
}
.item--2:after,
.item--5:after {
  border-bottom-color: transparent !important;
  border-right-color: transparent !important;
}

.item--3:before,
.item--6:before {
  border-top-color: transparent !important;
  border-left-color: transparent !important;
}
.item--3:after,
.item--6:after {
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
}

.item--2:after,
.item--5:before {
  border-left-color: transparent !important;
}

.item--3:after,
.item--6:before {
  border-right-color: transparent !important;
}

.item {
  background: #151515;
}
.item:before, .item:after {
  border-color: #151515;
}

.digit--sec {
  vertical-align: text-bottom;
  font-size: .5em;
}
@media (max-width: 600px) {
  .digit--sec {
    display: none;
  }
}
View Compiled
var digits_map = [[".item--1", ".item--2", ".item--3", ".item--5", ".item--6", ".item--7"],
	[".item--3", ".item--6"],
	[".item--1", ".item--3", ".item--4", ".item--5", ".item--7"],
	[".item--1", ".item--3", ".item--4", ".item--6", ".item--7"],
	[".item--2", ".item--3", ".item--4", ".item--6"],
	[".item--1", ".item--2", ".item--4", ".item--6", ".item--7"],
	[".item--1", ".item--2", ".item--4", ".item--5", ".item--6", ".item--7"],
	[".item--1", ".item--3", ".item--6"],
	[".item--1", ".item--2", ".item--3", ".item--4", ".item--5", ".item--6", ".item--7"],
	[".item--1", ".item--2", ".item--3", ".item--4", ".item--6", ".item--7"]
	];

var head = document.querySelector('head');
head.insertAdjacentHTML('beforeend', '<style id="coloring"></style>');
var style_container = document.getElementById("coloring");

var color_step = 0;
var color_steps_max = 12;
var color_period = 1; // time out before changing color
var color_time_counter = 0;
var color_class = "js-color--active";

var digits = document.querySelectorAll('.digit');
var digit_item_class = ".digit__item";
var digits_items = document.querySelectorAll(".digit__item");
var dottes = document.querySelector(".dottes");
var dottes_items = document.querySelectorAll(".dottes__item");

setTime();
var interval = setInterval(setTime,1000);	

function setTime() {

	// Get Date 
	var now = new Date();
	var hour = now.getHours() >= 10 ? now.getHours() : "0" + now.getHours();
	var min = now.getMinutes() >= 10 ? now.getMinutes() : "0" + now.getMinutes();
	var sec = now.getSeconds() >= 10 ? now.getSeconds() : "0" + now.getSeconds();
	var date_string = hour + "" + min + "" + sec;

	// Change Time
	for ( var i = 0; i < digits.length; i++ ) {
		
		var digit = digits[i];
		var digit_value = +date_string.charAt(i);

		remove_class_from_items (digit, color_class);
		remove_class_from_elem(dottes, color_class);

		var digit_elems_classes = digits_map[digit_value];

		if ( digit_elems_classes.length > 0 ){
			for ( var l = 0; l < digit_elems_classes.length; l++ ){
				var item = digit.querySelector(digit_elems_classes[l]);
				item.classList.add( color_class  );
				}
		}	
		
	}

	dottes.classList.add( color_class );

	// Change colors
	if ( color_time_counter == color_period ){
		color_time_counter = 0;
		change_color_by_style();
	}
	else {
		color_time_counter++;
	}
	
}

function add_class_to_items ( elem ) {
	var items = elem.querySelectorAll(".item");

	for ( var i = 0; i < items.length; i++ ){
		items[i].classList.add ( class_color );
	}
}

function remove_class_from_items ( elem, class_prefix ) {
	var items = elem.querySelectorAll(".item");

	for ( var i = 0; i < items.length; i++ ){
		remove_class_from_elem(items[i], class_prefix);
	}
}

function remove_class_from_elem ( elem, class_prefix ) {
	var classes = elem.classList;
			
	for ( var k = 0; k < classes.length; k++ ){
		if ( classes[k].indexOf(class_prefix) >= 0 ){
			elem.classList.remove(classes[k]);
		}
	}
}

function change_color_by_style(){

	var hue_value = 360 / color_steps_max * color_step;
	var bright_value = 50; 
	
	var current_color = "hsl(" + hue_value + ", 70%, " + bright_value + "%)";
	var color_class_local = "." + color_class;

	var styles = color_class_local + " { background: " + current_color + "; }";
		styles += color_class_local + ":before, " + color_class_local + ":after { border-color: " + current_color + "; }";

	style_container.innerHTML = styles;

	if ( color_step < color_steps_max ){
		color_step++;
	}
	else {
		color_step = 0;
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.