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

Question

我正在尝试在纯 CSS 中重新创建以下 gif -

此处的 Css - http://codepen.io/anon/pen/FmCaL - (webkit/chrome 仅在 mo)

我试图通过使用前后伪选择器来重新创建缺失的圆 block ，但我无法获得正确的 Angular 。

有可能吗？有没有更好的方法？

---

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

Answer 1

简单地这样做怎么样？

Demo

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 属性旋转三 Angular 形。

---

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); }
}

---

我的建议:当你更新你的问题时，你说你想要一个透明的排水沟，我建议你使用 .png 图像并旋转它，而不是写 100 行 CSS 和担心关于跨浏览器兼容性。或者，正如我在评论中分享的链接一样，您可以使用 CSS 屏蔽。