css - CSS 中的旋转加载器

Question

首先，对不起，如果标题是错误的，因为我不知道这些是否真的被称为旋转装载机。这就是我所说的：JSFiddle

这些装载机有两个问题，

在 .chrome-loader 中，如果我设置height: 50px; width: 50px;了，并且在.ring-makersettop: 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关键帧允许使用名称吗？

score 0 · Accepted Answer

你必须纠正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 {

1 回答 1