JavaScript Clock

HTML

Copy to Clipboard

CSS

Copy to Clipboard

@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');

.clock {
	background: #f4f4f4;
	width: 300px;
	height: 300px;
	margin: 0 auto;
	border-radius: 50%;
	border: 14px solid lightblue;
	position: relative;
	box-shadow: 0px 40px 100px -10px #555;
}

.connector {
	width: 7px;
	height: 7px;
	border: 7px solid #ccc;
	border-radius: 50%;
	background: #f4f4f4;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	position: absolute;
	z-index: 10;
	box-shadow: 0 2px 4px -1px black;
}

.hour-hand {
	position: absolute;
	z-index: 5;
	width: 4px;
	height: 65px;
	background: #222;
	top: 79px;
	transform-origin: 50% 72px;
	left: 50%;
	margin-left: -2px;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
}

.minute-hand {
	position: absolute;
	z-index: 6;
	width: 4px;
	height: 100px;
	background: #555;
	top: 46px;
	left: 50%;
	margin-left: -2px;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	transform-origin: 50% 105px;
}

.second-hand {
	position: absolute;
	z-index: 7;
	width: 2px;
	height: 120px;
	background: lightblue;
	top: 26px;
	lefT: 50%;
	margin-left: -1px;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	transform-origin: 50% 125px;
}

span {
	display: inline-block;
	position: absolute;
	color: #222;
	font-size: 22px;
	font-family: 'Abel', sans-serif;
	font-weight: 700;
	z-index: 4;
}

.hour12 {
	top: 30px;
	left: 50%;
	margin-left: -9px;
}

.hour1 {
	top: 40px;
	right: 90px;
}

.hour2 {
	top: 78px;
	right: 47px;
}

.hour3 {
	top: 137px;
	right: 30px;
}

.hour4 {
	top: 193px;
	right: 46px;
}

.hour5 {
	top: 230px;
	right: 90px;
}

.hour6 {
	bottom: 30px;
	left: 50%;
	margin-left: -5px;
}

.hour7 {
	top: 229px;
	left: 92px;
}

.hour8 {
	top: 193px;
	left: 49px;
}

.hour9 {
	top: 140px;
	left: 32px;
}

.hour10 {
	top: 78px;
	left: 50px;
}

.hour11 {
	top: 41px;
	left: 91px;
}

.markinglines {
	position: absolute;
	z-index: 2;
	width: 2px;
	height: 15px;
	background: #555;
	left: 50%;
	margin-left: -1px;
	transform-origin: 50% 150px;
}

.markinglines:nth-child(5n-1) {
	width: 4px;
	height: 25px;
}

JavaScript

Copy to Clipboard

JavaScript Clock