TRON Clock *

dabblet.css

/** TRON Clock **/
body{
	background-color: black;
}
.tron{
	position: relative;
	width: 300px;
	height: 300px;
}
.tron > span:nth-child(odd){
	background-color: #00D9EF;
}
.tron > span:nth-child(even){
	background-color: black;
}
.c{
	position:absolute;
	border-radius: 50%;
}
.c1{
	width: 100%;	
	height: 100%;	
}
.c2{
	width: 90%;
	height: 90%;
	margin: 5%;
}
.c3{
	width: 80%;
	height: 80%;
	margin: 10%;
}
.c4{
	width: 70%;
	height: 70%;
	margin: 15%;
}
.sec{
	position: absolute;
	left: -webkit-calc(50% - 5%/2);
	width: 5%;
	height: 50%;
	background-color: black;
	-webkit-transform: rotate(90deg);		
	-webkit-transform-origin: 50% 100%;
	-webkit-transition: -webkit-transform 15s linear;
}
.sec:hover{
	
}

dabblet.html

<div class='tron'>
	<span class='c c1'><span class='sec'></span></span>
	<span class='c c2'></span>
	<span class='c c3'></span>
	<span class='c c4'></span>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"60","seethrough":"","prefixfree":"","page":"all"}