iOS 7 Clock

dabblet.css

/**
 * iOS 7 Clock
 */

body {
	font-size: 12px;
}

.icon {
	display: inline-block;
	position: relative;
	margin: 25px;
	width: 200px;
	height: 200px;
	border: 1px solid #d9dbda;
	border-radius: 20%;
	overflow: hidden;
}

.clock {
	background: #000;
}
.clock-face {
	position: absolute;
	top: 5%;
	left: 5%;
	width: 90%;
	height: 90%;
	border-radius: 50%;
	background: #fff;
}
.clock-numbers {
	list-style-type: none;
	counter-reset : clock-counter;
}
.clock-numbers li {
	position: absolute;
	top: 7.5%;
	left: 50%;
	width: 0;
	height: 85%;
}
.clock-numbers li:after {
	display: block;
	width: 2em;
	margin-left: -1em;
	counter-increment: clock-counter;
	content: counter(clock-counter);
	font: 1.5em "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: center;
}
.clock-numbers li:nth-child(1) {
	transform: rotate(30deg);
}
.clock-numbers li:nth-child(2) {
	transform: rotate(60deg);
}
.clock-numbers li:nth-child(3) {
	transform: rotate(90deg);
}
.clock-numbers li:nth-child(4) {
	transform: rotate(120deg);
}
.clock-numbers li:nth-child(5) {
	transform: rotate(150deg);
}
.clock-numbers li:nth-child(6) {
	transform: rotate(180deg);
}
.clock-numbers li:nth-child(7) {
	transform: rotate(210deg);
}
.clock-numbers li:nth-child(8) {
	transform: rotate(240deg);
}
.clock-numbers li:nth-child(9) {
	transform: rotate(270deg);
}
.clock-numbers li:nth-child(10) {
	transform: rotate(300deg);
}
.clock-numbers li:nth-child(11) {
	transform: rotate(330deg);
}
.clock-numbers li:nth-child(12) {
}
.clock-numbers li:nth-child(1):after {
	transform: rotate(-30deg);
}
.clock-numbers li:nth-child(2):after {
	transform: rotate(-60deg);
}
.clock-numbers li:nth-child(3):after {
	transform: rotate(-90deg);
}
.clock-numbers li:nth-child(4):after {
	transform: rotate(-120deg);
}
.clock-numbers li:nth-child(5):after {
	transform: rotate(-150deg);
}
.clock-numbers li:nth-child(6):after {
	transform: rotate(-180deg);
}
.clock-numbers li:nth-child(7):after {
	transform: rotate(-210deg);
}
.clock-numbers li:nth-child(8):after {
	transform: rotate(-240deg);
}
.clock-numbers li:nth-child(9):after {
	transform: rotate(-270deg);
}
.clock-numbers li:nth-child(10):after {
	transform: rotate(-300deg);
}
.clock-numbers li:nth-child(11):after {
	transform: rotate(-330deg);
}
.clock-hand {
	position: absolute;
	top: 50%;
	left: 50%;
	transform-origin: 50% 100%;
}
.clock-hand:after {
	content: "";
	position: absolute;
	bottom: 0;
	transform-origin: 50% 100%;
}
@keyframes clockwork {
	to {
		transform: rotate(1turn);
	}
}
.clock-hand.hr:before {
	content: "";
	position: absolute;
	bottom: -0.3em;
	left: -0.3em;
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	background: #000;
}
.clock-hand.hr:after {
	height: 3em;
	background: #000;
	left: -0.15em;
	width: 0.3em;
	animation: clockwork 43200s linear infinite;
}
.clock-hand.min:after {
	height: 5.4em;
	background: #000;
	left: -0.15em;
	width: 0.3em;
	animation: clockwork 3600s linear infinite;
}
.clock-hand.sec:after {
	height: 4em;
	background: #ce322b;
	left: -0.1em;
	width: 0.2em;
	animation: clockwork 60s linear infinite;
}
.clock-hand.sec:before {
	content: "";
	position: absolute;
	bottom: -0.2em;
	left: -0.2em;
	width: 0.4em;
	height: 0.4em;
	border-radius: 50%;
	background: #ce322b;
}

dabblet.html

<div class="clock icon">
	<div class="clock-face"></div>
	<ol class="clock-numbers">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ol>
	<div class="clock-hand hr"></div>
	<div class="clock-hand min"></div>
	<div class="clock-hand sec"></div>
</div>

dabblet.js

// Set the clock to current time, then let the CSS animation do the rest.
(function () {
	var date = new Date(),
		time = {
			hr: date.getHours(),
			min: date.getMinutes(),
			sec: date.getSeconds()
		},
		degs = {
			hr: time.hr * 30 + 30 * time.min / 60,
			min: time.min * 6 + 6 * time.sec / 60,
			sec: time.sec * 6
		},
		hands = {
			hr: document.querySelector(".clock-hand.hr"),
			min: document.querySelector(".clock-hand.min"),
			sec: document.querySelector(".clock-hand.sec")
		};
	for (var key in hands) {
		if ("transform" in hands[key].style) {
			hands[key].style.transform = "rotate(" + degs[key] + "deg)";
		}
		else if ("webkitTransform" in hands[key].style) {
			hands[key].style.webkitTransform = "rotate(" + degs[key] + "deg)";
		}
	}
})();

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}