css - 在 CSS 中旋转加载器

Question

首先，如果标题有误，我很抱歉，因为我不知道这些是否真的被称为旋转装载机。这就是我所说的:JSFiddle

我对这些装载机有 2 个问题，

• 在 .chrome-loader 中，如果我设置 height: 50px; width: 50px;，并在 .ring-maker 中设置 top: 2.5px; left: 2.5px 效果不是很好。 px 单位是否支持最多 2 位小数的值？我想他们不会。那么我能做些什么来修复它呢？我基本上想让它和上面的一样大。也许，其他单位？

• 对于 .win8-loader，我将此 CSS 动画设置为第一个点。

  @-webkit-keyframe win8dot1 {
      0% {left: -10px;}
      33% {left: 500px;}
      66% {left: 780px;}
      100% {left: 1280px;}
  }
  

  但它不起作用。第一个点甚至没有移动。

PS:abc1-de2 之类的名称是否允许用于关键帧？

Answer 1

你必须纠正2个问题

你的 CSS

.win8-loader .dot1 { -webkit-animation: win8-dot1 2.5s infinite linear; }

@-webkit-keyframe win8dot1 {

更正:

.win8-loader .dot1 { -webkit-animation: win8dot1 2.5s infinite linear; }

@-webkit-keyframes win8dot1 {