纯CSS动态时钟

话不多说，先上代码

HTML：

"clock">
	"img/clock.jpg" alt="">
	
"hour-hand">
	
"minute-hand">
	
"second-hand">
	
"circle">

CSS：

body{
     
				margin: 0;
				padding: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
			}
			.clock{
     
				position: relative;
			}
			.clock .hour-hand{
     
				width: 5px;
				height: 120px;
				background-color: #000000;
				animation: toRotate 43200s linear infinite;
			}
			.clock .minute-hand{
     
				width: 5px;
				height: 180px;
				background-color: #000000;
				animation: toRotate 3600s linear infinite;
			}
			.clock .second-hand{
     
				width: 5px;
				height: 180px;
				background-color: #FF0000;
				animation: toRotate 60s steps(60) infinite;
				/* animation: rotate .6s steps(60) infinite; */
			}
			.clock .minute-hand,.clock .second-hand{
     
				position: absolute;
				top: 70px;
				left: 250px;
				transform-origin: bottom;
			}
			.clock .hour-hand{
     
				position: absolute;
				transform-origin: bottom;
				left: 250px;
				top: 130px;
				
			}
			 @keyframes toRotate{
     
			 		0%{
     transform: rotate(0deg);}
					100%{
     transform: rotate(360deg);}
			    }
			.circle{
     
				width: 20px;
				height: 20px;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				z-index: 9;
				background-color: #FF0000;
				border-radius: 50%;
			}

因为CSS无法获取本地时间，所以指针只能从设置好的位置开始转动，（这里设置的是12点的位置）

效果图：
初始位置：

开始运动之后：

附上时钟的背景图片：

想要实现CSS+JS的这种，可以随着当前时间转动的态时钟，可以在我写的这篇文章中查阅：
CSS+JS动态时钟（获取当前时间）