我居然用css测出了我电脑的屏幕刷新率（精确到小数点后）！！

1.等边三角形

今天学习css属性的时候，随便画了个等边三角形，原理嘛，当然是 直接用等边三角形图片做背景图片 用三边隐藏，只显示一个方向的边框

贴出css部分的代码

#test {
  --data-border-width: 100px; //定义正三角形边长

  width: 0;
  height: 0;
  border-top: 0px solid transparent;
  border-left: var(--data-border-width) solid transparent;
  border-right: var(--data-border-width) solid transparent;
  border-bottom: calc(var(--data-border-width) * 1.7320508075689) solid #ff0000;
}
复制代码

根号3我就用了近似值表示，画出了大概的等边三角形（本人菜鸡不知道怎么在css中使用根号，如果有类似方法，请大家评论区告知）

2.animation

为了巩固知识，画完三角形之后，我又加了个旋转的动画，大概就是转一圈

@keyframes r {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(120deg);
  }
}
复制代码

再加上 animation: r 1s linear infinite; ，需要三秒钟等边三角形才能旋转一圈，但是120刚好能使等边三角形回到原来的方向，但是这个时候我还发现了一个问题。。

盒子的 transform-origin 初始为 50% 50%，大概在这个位置

就是三角形高的一半（1/2），旋转起来后，等边三角形变成了奇行种

（巨人里奇行种的图挂了，发布的时候没问题，修改的时候就说我色情低俗了，大家自行脑补吧）

拿出我初中的数学知识，绞尽我的脑汁，搔掉我一大撮头发，再经过我的一系列计算，终于计算出要想三角形正常旋转起来， transform-origin 应该在高的三分之二处，所以我们应该加上transform-origin: 50% calc(100% / 3 * 2);这句css属性，这样圆心就到了这个位置

好了，我们终于得到了完整的动画效果。

3.同步屏幕刷新率

现实生活中，所有东西旋转起来后，速度只要够快，我们都可以看到一个圆形，想到这一点后，我决定让三角形旋转成为一个圆形（事实证明我的想法是错误的），于是我把animation-duration设置到很小很小，让他0.000003秒旋转一圈

animation: r 0.00001s linear infinite;
复制代码

但是我发现眼睛看到的三角形旋转根本没有想象中的快

因为屏幕刷新率的问题，就算动画的时长是0.00001s，但是屏幕一秒钟并不能刷新100000次，所以看到的效果也被屏幕的刷新率限制了，这时我想到了，如果动画时长就等于屏幕刷新率，那么每次屏幕刷新的那一帧就刚好等于原来三角形的朝向，这时候我们根本看不出来三角形是否旋转。

厂商给的我电脑屏幕的刷新率为60hz，也就是一秒钟刷新60次，用我仅剩不多的数学知识，又在草稿纸经过两小时的计算，测量，所以我又修改了这句css样式：

  --data-hz: 60; //屏幕刷新率
  animation: r calc(1s / var(--data-hz)) linear infinite;
复制代码

很好，三角形大概，可能，应该，是看起来没有旋转动画了。

其实三角形看起来是在慢慢的向左边旋转，为什么呢？因为--data-hz其实是小于实际刷新率的，所以每次屏幕刷新的时候，三角形刚好运动到差一点到120deg的位置，然后我对--data-hz进行的细微的调整，指导三角形看起来不会旋转，或者旋转得很慢，最后得到刷新率大概为60.03123

4.最后

贴出代码

#test {
  --data-border-width: 100px; //定义正三角形边长

  width: 0;
  height: 0;
  border-top: 0px solid transparent;
  border-left: var(--data-border-width) solid transparent;
  border-right: var(--data-border-width) solid transparent;
  border-bottom: calc(var(--data-border-width) * 1.7320508075689) solid #ff0000;
  transform-origin: 50% calc(100% / 3 * 2);

  --data-hz: 60.03123; //屏幕刷新率
  animation: r calc(1s / var(--data-hz)) linear infinite;
}

@keyframes r {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(120deg);
  }
}
复制代码

最后，这只是我学习的时候突发奇想做的一个小实验，如果有什么建议，希望大佬们在评论区留言，顺便求一下如何在css中实现根号计算