1实现效果
二、源码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>时钟</title><style>*{margin: 0;padding: 0;}/* 清楚默认效果 */.clock{width: 350px;height: 350px;margin: 30px auto;border-radius:50%;border: 3px black solid;position: relative;background-image: url(../时钟背景.jpg);background-size: cover;}/* 设置时钟外表和相对定位 */.clock > div{position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}/* 设置时钟的直接子元素居中 *//* 小时 */.hour-warpper{width: 70%;height: 70%;animation: run 43200s linear infinite ;}.hour{height: 50%;width:7px;background-color: black;margin: 0 auto;/* 图片原因，导致中心偏下 */}/* 分钟 */.min-warpper{height: 80%;width: 80%;animation: run 3600s infinite ;}.min{margin: 0 auto;height: 50%;width: 3px;background-color: blue;}/* 秒钟 */.sec-warpper{width: 90%;height: 90%;animation: run 60s infinite steps(60);}.sec{margin: 0 auto;height: 50%;width: 2px;background-color: red;}/* 动画 */@keyframes run{from{transform: rotateZ(0);}to{transform: rotateZ(1turn);}}</style></head><body><div class="clock"><div class="hour-warpper"><div class="hour"></div></div><div class="min-warpper"><div class="min"></div></div><div class="sec-warpper"><div class="sec"></div></div></div></body></html>
不喜勿噴。
