School Clock Using CSS Moving Second Hand



School Clock Using CSS Moving Second Hand




 
<link href="http://tezla.ru/rassadin/wall-clock-demo/" rel="stylesheet" type="text/css" />

<div id="clock">
	<div id="a">
		<div id="b">
			<div id="c">
				<div id="d">
					<div id="sh">
						<div class="hh">
							<div class="h"></div>
						</div>
						<div class="mm">
							<div class="m"></div>
							<div class="mr"></div>
						</div>
						<div class="ss">
							<div class="s"></div>
						</div>
					</div>
					<div id="ii">
					<b><i></i><i></i><i></i><i></i></b>
					<b><i></i><i></i><i></i><i></i></b>
					<b><i></i><i></i><i></i><i></i></b>
					<b><i></i><i></i><i></i><i></i></b>
					<b><i></i><i></i><i></i><i></i></b>
					<b><i></i><i></i><i></i><i></i></b>
					</div>
					<div id="e">
						<div id="f">
							<u>12<u>1<u>2<u>3</u>4</u>5</u></u>
						</div>
						<div id="g">
							<u><u>11<u>10<u>9</u>8</u>7</u>6</u>
						</div>
						<div id="q"><a href="" style="position:relative;z-index:1000;color:#222;text-decoration:none;">quartz</a></div>
					</div>
					<div class="hh">
						<div class="h"></div>
					</div>
					<div class="mm">
						<div class="m"></div>
						<div class="mr"></div>
					</div>
					<div class="ss">
						<div class="s"></div>
						<div class="sr"></div>
					</div>
					<div id="k"></div>
				</div>
			</div>
		</div>
	</div>
</div>                    
                  
                



 
}
#a {
	width:10.0em;
	height:10.0em;
	position:relative;
	border-radius:5.0em;
	background:#ccc;/*ccc*/
	box-shadow:
		inset 0.05em -0.05em 0 #333, /*ccc*/
		inset 0.17em -0.17em 0 #555,
		inset -0.03em -0.04em 0 #333, /*999*/
		inset -0.03em 0.02em 0 #333, /*ccc*/
		inset -0.1em -0.1em 0 #555,
		0.1em 0.3em 0.2em rgba(0,0,0,0.3);
}
#b {
	width:9.4em;
	height:9.4em;
	top:0.3em;
	left:0.3em;
	position:relative;
	border-radius:4.7em;
	background:#fff;
	box-shadow:
		inset 0.04em 0 0 #fff,
		inset 0 -0.06em 0 #ddd,
		inset 0.16em -0.08em 0 #222,
		inset -0.16em 0.08em 0 #222,
		inset 0.2em 0.2em 0 #222,
		0.06em -0.03em 0 #999, 
		-0.1em 0.1em 0 #777,
		-0.13em -0.2em 0 #fff,
		0.13em 0.2em 0 #222,
		0.13em 0.3em 0 #333; /*ccc*/
}
#c {
	width:8.9em;
	height:8.9em;
	top:0.25em;
	left:0.25em; 
	position:relative;
	border-radius:4.45em;
	background:#eed;/*f4f5f6;*/
	box-shadow:
		inset 0.15em 0.2em 0.05em rgba(0,0,0,0.4),
		inset 0.2em 0.4em 0.2em rgba(0,0,0,0.3),
		inset 0 0.05em 0.3em rgba(0,0,0,0.1),
		-0.16em 0.08em 0 #444,
		0.16em -0.08em 0 #444;
}
#d { width:8.8em;
	 height:8.8em;
	 top:0.05em;
	 left:0.05em;
	 position:relative;
	 border-radius:4.4em;
}
#e { width:8.18em;
	 height:8.18em;
	 padding-top:4.09em;
	 box-sizing: border-box;
	 -moz-box-sizing: border-box;
	 -webkit-box-sizing: border-box;
	 left:0.29em;
	 top:0.29em;
	 position:absolute;
	 border:solid 0.04em rgba(0,0,0,0.5);
	 border-radius:4.09em;  
}
#ii {
	padding-left:4.34em;
	position:absolute;
}
b, i {
	height:8.2em; 
	position:absolute;
	display:block;
}
b {
	border:solid 0 #222;
	border-width:0.3em 0;
	width:0.12em;
}
i {
	border:solid 0 rgba(0,0,0,0.5);
	border-width:0.3em 0;
	width:0.04em;
}
b>i,i>i {
	transform:rotate(6deg) ;
	margin-top:-0.3em;
}
b>b  {
	transform:rotate(30deg);
	margin-top:-0.3em; }
b>i {
	left:0.03em;
}
#f,#g {
	font:1.2em/1.0em WallClock, sans-serif;
	text-align:center;
	width:6.8em;
    color:#222;
}
#g>u>u {	
	letter-spacing:0.1em;
}
#g>u>u>u {
	letter-spacing:0;
}
u {
	display:block;
	line-height:1em;
	text-decoration: none;
}
u>u>u>u {
	margin:0.5em -0.55em;
	padding: 0 0.05em;
}
u>u>u {
	margin:0.0em -1.75em;
	padding: 0 0.7em;
}
u>u {
	margin:-0.55em 0;
	text-align:right;
	padding: 0 1.65em;
}
#f {
	margin-top:-3.37em;
}
#g {
	margin-top:-6em;
}
#g u>u {
	text-align:left;
}
#q { 
	font:0.22em/1em Segoe UI,Helvetica,sans-serif;
	text-align:center;
	margin-top:-11.5em;
	color:#555;
}
.ss, .mm, .hh {
	width:8.0em;
	height:8.0em;
	top:0.4em;
	left:0.4em;
	position:absolute;
}
.hh {
	transform:rotate(-55deg);
}
.mm {
	transform:rotate(60deg);
}
.ss {
	animation: tick 1s normal infinite steps(25,end);
 }
@keyframes tick {
	0% { transform: rotate(0deg); }
	12% { transform:rotate(6deg); }
	100% { transform: rotate(6deg); }		
}
.s {
	width:0.1em;
	height:4.8em; 
	top:0.6em;
	left:3.95em;
	position:relative; 
	background:#a00;
	outline: 1px solid transparent; 
	animation: a360_10 60s normal infinite steps(60,end); 
}
.sr {
	width:0.3em;
	height:0.3em;
	background:#a00;
	margin:-0.95em 0 0 3.84em;
	border-radius:0.15em;
}
@keyframes a360_10  {
	0% { transform: translate(0, 1.0em) rotate(0deg) translate(0,-1.0em) }
	100% { transform: translate(0, 1.0em) rotate(360deg) translate(0,-1.0em) }
}

.m {
	height:4.8em;
	left:3.89em;
	width:0.22em;
	position:relative;
	background:#222;
	border:0 0 3.2em 0;
	animation: a36016 3600s normal infinite linear;
	outline: 1px solid transparent;
}
@keyframes a36016 {
	0% { transform: translate(0, 1.6em) rotate(0deg) translate(0,-1.6em); }
	100% { transform: translate(0, 1.6em) rotate(360deg) translate(0,-1.6em); }
}

.mr {
	width:0.5em;
	height:0.5em;
	background:#222;
	margin:-1.05em 0 0 3.74em;
	border-radius:0.25em;
}
.h { 
	width:0.3em;
	height:3.4em;
	left:3.85em;
	position:relative; 
	background:#222;
	margin-top:1.3em; 
	outline: 1px solid transparent;
	animation: a36010 43200s normal infinite linear;
}
#sh {
	width:8.0em;
	height:8.0em;
	top:0.2em;
	left:0.1em;
	position:absolute;
	/*display:none;*/
}
#sh .s, #sh .m, #sh .h, #sh .mr  {
	background:#ddc;
	box-shadow:0 0 0.05em #ddc, 0 0 0.025em #ddc;
}
#k {
	width:8.8em;
	height:8.8em;
	position:absolute;
	border-radius:4.4em;
	box-shadow:inset 0.45em 0.9em 0.05em rgba(250,252,253,0.2);
}
/* Vendor CSS prefixes */
#clock {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}
#clock b>i,
#clock i>i {
	-ms-transform:rotate(6deg);
	-webkit-transform:rotate(6deg);
}
#clock b>b {
	-ms-transform:rotate(30deg);
	-webkit-transform:rotate(30deg);
}
#clock .hh {
	-webkit-transform:rotate(-55deg);
}
#clock .mm {
	-webkit-transform:rotate(60deg);
}
#clock .ss {
	-webkit-animation: tick 1s normal infinite steps(25,end);
}
@-webkit-keyframes tick {
	0% { -webkit-transform: rotate(0deg); }
	12% { -webkit-transform:rotate(6deg); }
	100% { -webkit-transform: rotate(6deg); }		
}
#clock .s {
	-webkit-animation: a360_10 60s normal infinite steps(60,end); 
}
@-webkit-keyframes a360_10 {
	0% { -webkit-transform: translate(0, 1.0em) rotate(0deg) translate(0,-1.0em) }
	100% { -webkit-transform: translate(0, 1.0em) rotate(360deg) translate(0,-1.0em) }
}
#clock .m {
	-webkit-animation: a36016 3600s normal infinite linear;
}
@-webkit-keyframes a36016 {
	0% { -webkit-transform: translate(0, 1.6em) rotate(0deg) translate(0,-1.6em); }
	50% { -webkit-transform: translate(0, 1.6em) rotate(180deg) translate(0,-1.6em); }
	100% { -webkit-transform: translate(0, 1.6em) rotate(360deg) translate(0,-1.6em); }
}
#clock .h,
#css3fixed:checked ~ #clock .hh {
	-webkit-animation: a36010 43200s normal infinite linear;
}

/* Fixes */

#clock {
	transition:none;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
}


#clock b:nth-child(2) {
	transform:rotate(30deg);
	-ms-transform:rotate(30deg);
	-webkit-transform:rotate(30deg);
}
#clock b:nth-child(3) {
	transform:rotate(60deg);
	-ms-transform:rotate(60deg);
	-webkit-transform:rotate(60deg);
}
#clock b:nth-child(4) {
	transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
}
#clock b:nth-child(5) {
	transform:rotate(120deg);
	-ms-transform:rotate(120deg);
	-webkit-transform:rotate(120deg);
}
#clock b:nth-child(6) {
	transform:rotate(150deg);
	-ms-transform:rotate(150deg);
	-webkit-transform:rotate(150deg);
}
#clock i:nth-child(1) {
	transform:rotate(12deg);
	-ms-transform:rotate(12deg);
	-webkit-transform:rotate(12deg);
}
#clock i:nth-child(2) {
	transform:rotate(18deg);
	-ms-transform:rotate(18deg);
	-webkit-transform:rotate(18deg);
}
#clock i:nth-child(3) {
	transform:rotate(24deg);
	-ms-transform:rotate(24deg);
	-webkit-transform:rotate(24deg);	
}
#clock #f {
	-webkit-transform:translate(0,0.05em);				
}
/* IE10 fix */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#css3fixed:checked ~  #clock i, #css3fixed:checked ~  #clock b {
		border-left:solid 0px #fff;
		border-right:solid 0px #fff;
	}
}
/* Opera rotation fix */
#clock .s {
	animation: a360_10of 60s normal infinite steps(60,end); 
}
@keyframes a360_10of {
	0% {  transform: translate(0, 1.0em) rotate(0deg) translate(0,-1.0em);
		-o-transform: translate(0, 2em) rotate(0deg) translate(0,-2em) }
	100% { transform: translate(0, 1.0em) rotate(360deg) translate(0,-1.0em);
		-o-transform: translate(0, 2em) rotate(360deg) translate(0,-2em) }
}


/*** Font for numbers ***/
@font-face {
    font-family: 'WallClock';
    asrc: url('wallclock.eot');
    }

@font-face {
    font-family: 'WallClock';
    src: 
url(data:font/otf;charset=utf-8;base64,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