CSS 中的旋转加载器答案

【问题标题】：Rotating Loaders in CSSCSS 中的旋转加载器
【发布时间】：2013-07-21 23:16:48
【问题描述】：

首先，对不起，如果标题是错误的，因为我不知道这些是否真的被称为旋转装载机。这就是我要说的：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 这样的名称是否允许用于关键帧？

【问题讨论】：

【解决方案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 {

【讨论】：