爱站程序员基地CSS实现简易钟表（无刻度，极简版，transform变形）
欢迎来到我的博客！
在下刚入门Web前端,在学习transform的过程中，老师通过旋转三个指针的容器（三个同样大小叠在一起的透明背景圆形）实现了一个简易钟表。随后我突发奇想就想着试试看能不能做一个不要容器直接旋转指针实现的简易钟表。
能力有限，还没接触过JS，做出的过于简陋，无刻度盘，最简单的方法可以找个带刻度盘的背景图片哈哈。
思路如下：
利用三个div做三根指针，通过绝对定位将三根指针定位到表盘中央，最后利用animation做出旋转效果。秒针可以设置steps(60)实现一格一格动的效果。
遇到的问题：
对同一div同时设置transform和animation前者不生效。
对指针设置transform: translateX(-50%)使水平方向中线对齐后对指针再设置旋转动画会使得transform: translateX(-50%)失效。看他人博客解释说对同一div，同时设置transform和animation后transform不生效。于是我之后把translateX(-50%)也写在动画里了。但是要注意：
像这样也会导致前面的transform被覆盖不生效。
// An highlighted blocktransform: translateX(-50%);transform:rotateZ(360deg);
这样子写没问题：
// An highlighted blocktransform: translateX(-50%) rotateZ(0deg);
完整代码如下：
// An highlighted block<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>时钟</title><style>*{margin: 0;padding: 0;}.biaopan{height: 500px;width: 500px;margin: 100px auto;border: 2px black solid;border-radius: 50%;position: relative;transform: rotateZ(180deg);}/* 定位三根时针*/.biaopan>div{position: absolute;left: 50%;top: 50%;transform-origin: top center;}.sec{height: 46%;width: 3px;background-color: orangered;animation: roll 60s infinite steps(60);}.min{height: 38%;width: 6px;background-color: black;animation: roll 3600s infinite linear;}.hour{height: 26%;width: 9px;background-color: black;animation: roll 43200s infinite linear;}/* 设置一个旋转360度的动画效果*/@keyframes roll{from{transform: translateX(-50%) rotateZ(0deg);}to{transform: translateX(-50%) rotateZ(360deg);}}</style></head><body><div class=\"biaopan\"><div class=\"hour\"></div><div class=\"min\"></div><div class=\"sec\"></div></div></body></html>
本人创作的第一篇博文，如有纰漏，敬请斧正。
感谢大家阅读！
