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; }