html - 尝试在 css 中重新创建加载 gif

Question

我正在尝试用纯 css 重新创建以下 gif -

这里的 CSS - http://codepen.io/anon/pen/FmCaL - （webkit/chrome 仅在 mo）

我试图通过使用之前和之后的伪选择器来重新创建缺少的圆块，但我无法获得正确的角度。

甚至有可能做到吗？有更好的方法吗？

---

感谢您迄今为止的任何帮助。我应该指定我需要箭头是透明的。我不能为圆圈的缺失部分使用纯色。

Answer 1

像这样简单地做怎么样？

演示

div {
    border: 10px solid #000;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    position: relative;    
}

div:after {
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    right: -12px; 
    content: " ";
    border-bottom: 12px solid #fff;
    border-right: 12px solid transparent;
    transform: rotate(10deg);
}

---

说明：我们在这里所做的是使用:after伪将元素绝对定位到圆，并使用transform属性来旋转三角形。

---

Demo 2（带动画）

div {
    border: 10px solid #000;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    position: relative;    
    animation: spin 1s infinite linear;
}

div:after {
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    right: -12px; 
    content: " ";
    border-bottom: 12px solid #fff;
    border-right: 12px solid transparent;
    transform: rotate(10deg);
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

---

我的建议：当你更新你的 qustion 时，你说你想要一个透明的装订线，我建议你使用.png图像并旋转它，而不是编写 100 行 CSS 并担心跨浏览器兼容性。或者，正如我在评论中分享的链接，您可以使用 CSS 掩码。

Answer 2

如果您不在乎三角形是否透明，我可以建议这样的事情：

演示（适用于 chrome 和 firefox）

.loading {
    display: inline-block;
    margin: 5em;
    border: 10px solid grey;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;     
}
.loading:before {
    content: '';
    display: block;
    border: 13px solid transparent;
    border-right-color: white;
    width: 20px;
    height: 0;
    border-radius: 50%;
    margin: -3px 0 0 -13px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(359deg); }}
@-moz-keyframes spin { 100% { -moz-transform: rotate(359deg); }}
@keyframes spin { 100% { transform: rotate(359deg); }}