css 动画时钟 时分秒

动画时钟

HTML

			<!-- 大体位置 -->
		<div id="shiz">
			<!-- 钟表盘 -->
		<div id="d1"></div>
			<!-- 时针 -->
		<div class="d1_s"></div>
			<!-- 分针 -->
		<div class="d1_f"></div>
			<!-- 秒针 -->
		<div class="d1_m"></div>
		</div>

CSS

				/* 定义动画 */
			@keyframes sz{
				/* 0% 指针沿着底边开始转*/
				from{transform-origin:bottom; transform: rotate(0deg);}
				/* 100% 指针沿着底边转完一圈*/
				to{transform-origin:bottom;  transform: rotate(360deg);}
			}
			#shiz>div{
				/* 大体位置 */
				margin:100px;
			}
			/* 最外层的圆 */
			#d1{
				/* 宽高400px */
				width: 400px;height: 400px;
				/* 50%倒角--圆 */
				border-radius: 50%;
				/* 边框--颜色---实线 */
				border: 2px #0af solid;
			}
			/* 时针 */
			.d1_s{
				/* 宽10px  高100px */
				width: 10px;height: 100px;
				/* 背景颜色 */
				background-color: #f0f;
				/* 绝对定位--脱离文档流 */
				position:absolute;
				/* 调整时针的位置到圆心 */
				top: 100px; left: 195px;
				/* 调用方法 动画名称  完成时间(1天) 次数(无限)  速度(平均) */
				animation: sz 86400s infinite linear;
			}
			/* 分针 */
			.d1_f{
				/* 宽8px  高130px */
				width: 8px; height:130px ;
				/* 背景颜色 */
				background-color: #aff;
				/* 绝对定位--脱离文档流 */
				position: absolute;
				/* 调整分针的位置到圆心 */
				top: 70px;left: 196px;
				/* 调用方法 动画名称  完成时间(1小时) 次数(无限)  速度(平均) */
				animation: sz 3600s infinite linear;
			}
			/* 秒针 */
			.d1_m{
				/* 宽6px  高150px */
				width:6px;height: 150px;
				/* 背景颜色 */
				background-color: #f00;
				/* 绝对定位--脱离文档流 */
				position: absolute;
				/* 调整秒针的位置到圆心 */
				top: 50px;left: 197px;
				/* 调用方法 动画名称  完成时间(1分钟) 次数(无限)  速度(平均) */
				animation:sz 60s infinite linear;
			}