mac 与 windows 上的 CSS 动画答案

【问题标题】：CSS animation on mac vs windowsmac 与 windows 上的 CSS 动画
【发布时间】：2018-10-11 14:58:23
【问题描述】：

我正在尝试创建微调器动画，但在 windows 和 mac 显示器之间的差异方面遇到了一些问题。

动画是一个非常基本的圆形微调器，使用 html 和 css 创建

<div class="cow-spinner">
 <span></span>
 <span></span> 
 <span></span>
 <span></span> 
</div>

还有一些基本的css：

.cow-spinner {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.cow-spinner span {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 3px solid black;
  border-radius: 50%;
  animation: cow-spin 1.2s ease-in-out infinite;
  border-color: black transparent transparent transparent;
}
.cow-spinner span:nth-child(1) {
  animation-delay: -0.45s;
}
.cow-spinner span:nth-child(2) {
  animation-delay: -0.3s;
}
.cow-spinner span:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes cow-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

动画本身完美运行，这里有一个工作示例：https://codepen.io/fatoilyguy/pen/oaZMMp

我的问题是，在 mac 上，圆本身具有平滑的边缘，宽度一致，如下所示：

但在 Windows 上，圆圈是像素化的，并且宽度变化很奇怪：

据我所知，两个平台上的浏览器之间没有区别。有什么办法可以防止平台之间发生这种差异？

【问题讨论】：

你的 Mac 有视网膜显示器吗？
这很微妙，但我在我的（非视网膜）mac 上看到了相同的像素化，圆圈的边缘看起来有点“块状”，我相信这就是你所说的“奇怪”宽度变化”。它似乎是多个元素加在一起的抗锯齿，当元素重叠时会产生更厚的边缘。抱歉，我不知道如何防止这种情况，但这似乎不是基于操作系统的差异。

标签： html css css-animations

【解决方案1】：

您可以尝试SVG 方法并检查渲染是否在所有地方都很好

   
.loader {
  display: inline-block;
  height: 100px;
  width: 100px;
  transform: rotateZ(0deg); 
  animation: rotate 1.5s linear infinite;
}

svg {
  max-width: 140px;
  max-height: 140px;
  fill: none;
  stroke: #9bc;
  stroke-width: 5px;
  stroke-dasharray: 301px;
  stroke-dashoffset: 200px;
  animation: path 1.5s linear 0s infinite;
}

@keyframes path {
  60%  { stroke-dashoffset: 40px;  }
  100% { stroke-dashoffset: 200px; }
}


@keyframes rotate {
  100% { transform: rotateZ(360deg) }
}

<div class="loader">
  <svg viewport="0 0 100 100" preserveAspectRatio="xMidYMid meet">
    <path d="M 50, 50 m -48, 0 a 48,48 0 1,0 96,0 a 48,48 0 1,0 -96,0" />
  </svg>
</div>

【讨论】：