纯HTML/CSS 实现时钟效果

yaodilu

2020-06-11

写了一个小Demo,用html,css渲染的时钟效果:
Html代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css实现时针</title>
		<link rel="stylesheet" href="css/style01.css" />
	</head>
	<body>
		<div class="watch">
			<ul class="num num1"><span>1</span></ul>
			<ul class="num num2"><span>2</span></ul>
			<ul class="num num3"><span>3</span></ul>
			<ul class="num num4"><span>4</span></ul>
			<ul class="num num5"><span>5</span></ul>
			<ul class="num num6"><span>6</span></ul>
			<ul class="num num7"><span>7</span></ul>
			<ul class="num num8"><span>8</span></ul>
			<ul class="num num9"><span>9</span></ul>
			<ul class="num num10"><span>10</span></ul>
			<ul class="num num11"><span>11</span></ul>
			<ul class="num num12"><span>12</span></ul>
		</div>
		<div class="pointer">
			<div class="hour-pointer"></div>
			<div class="min-pointer"></div>
			<div class="sec-pointer"></div>
		</div>
	</body>
</html>

Css代码:

*{
	margin: 0px;
	padding: 0px;
	
}
ul{
	list-style: none;
}
.watch{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 400px;
	height: 400px;
	background-color: #f2f2f2;
	border: 15px solid #dbdbdb;
	border-radius: 50%;
}
.num{
	position: absolute;
	top: 50%;
	left: 50%;
	/* transform: translate (0%, -50%) ; */
	font-size: 20px;
	margin-top: -15px;
	/* border: 1px solid red; */
	width: 48%;
	text-align: right ;
	transform-origin: left;
	}	
.num1{
	transform: rotate(-60deg);
}
.num1 span{
	transform: rotate(60deg);
}
.num2{
	transform: rotate(-30deg);
}
.num2 span{
	transform: rotate(30deg);
}
.num3{
	transform: rotate(-0deg);
}
.num3 span{
	transform: rotate(0deg);
}
.num4{
	transform: rotate(30deg);
}
.num4 span{
	transform: rotate(-30deg);
}
.num5{
	transform: rotate(60deg);
}
.num5 span{
	transform: rotate(-60deg);
}
.num6{
	transform: rotate(90deg);
}
.num6 span{
	transform: rotate(-90deg);
}
.num7{
	transform: rotate(120deg);
}
.num7 span{
	transform: rotate(-120deg);
}
.num8{
	transform: rotate(150deg);
}
.num8 span{
	transform: rotate(-150deg);
}
.num9{
	transform: rotate(180deg);
}
.num9 span{
	transform: rotate(-180deg);
}
.num10{
	transform: rotate(210deg);
}
.num10 span{
	transform: rotate(-210deg);
}
.num11{
	transform: rotate(240deg);
}
.num11 span{
	transform: rotate(-240deg);
}
.num12{
	transform: rotate(270deg);
}
.num12 span{
	transform: rotate(-270deg);
}
.num span{
	display:inline-block ;
	/* transform: rotate(90deg); */
}
.pointer{
	width: 100%;
	height: 100%;
	transform-origin: left center;
}
.pointer::after{
	content: ‘‘;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 30px;
	height: 30px;
	background-color: #cceecc;
	border-radius: 50%;
	transform-origin: left center;
}
.pointer>div{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -5px;
	width: 60px;
	height:9px;
	transform-origin: left center;
}
.hour-pointer{
	width: 30%;
	background-color: red;
	animation: ani 43200s linear infinite;
}
.hour-pointer::after{
	content: ‘‘;
	position: absolute;
	top: -1px;
	left: 50px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-width: 5px 0px 6px 60px;
	border-left-color: red;
}
.sec-pointer{
	width: 45%;
	background-color: black;
	transform: rotate(-60deg);
	animation: ani 60s linear infinite;
}
.sec-pointer::after{
	content: ‘‘;
	position: absolute;
	top: 0.5px;
	left: 60px;
	width: 0;
	height: 0;
	border: 4px solid transparent;
	border-width: 3px 0px 4px 100px;
	border-left-color: black;
}
.min-pointer{
	width: 30%;
	background-color: black;
	transform: rotate(-120deg);
	animation: ani 3600s linear infinite;
}
.min-pointer::after{
	content: ‘‘;
	position: absolute;
	top: 0.5px;
	left: 60px;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-width: 3px 0px 4px 65px;
	border-left-color: black;
}
@keyframes ani{
	from{
		transform: rotate(-90deg);
	}
	to{
		transform: rotate(270deg);
	}
}

渲染的效果:
纯HTML/CSS 实现时钟效果