CSS中的旋轉裝載機

Question

首先，抱歉如果標題錯誤，因爲我不知道這些實際上是否稱爲旋轉裝載機。這就是我所說的：JSFiddle

我有2個問題，這些裝載機，

• 在.chrome裝載機

  ，如果我設置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

必須更正兩個問題

你的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 {