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

概述我试图在纯css中重新创建以下gif – Css在这里 – http://codepen.io/anon/pen/FmCaL – (webkit / chrome仅在mo) 我试图通过使用之前和之前重新创建圆圈的缺失块.在psuedo选择器之后,但我无法获得正确的角度. 它甚至可以吗？有更好的方法吗？ 感谢您的帮助到目前为止.我应该指明我需要箭头是透明的.我不能使用纯色作为圆圈的缺失部分. 简单地 我试图在纯CSS中重新创建以下gif –

CSS在这里 – http://codepen.io/anon/pen/FmCaL – (webkit / Chrome仅在mo)

我试图通过使用之前和之前重新创建圆圈的缺失块.在psuedo选择器之后,但我无法获得正确的角度.

它甚至可以吗？有更好的方法吗？

感谢您的帮助到目前为止.我应该指明我需要箭头是透明的.我不能使用纯色作为圆圈的缺失部分.

解决方法 简单地这样做怎么样？

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属性旋转三角形.

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屏蔽.

总结

以上是内存溢出为你收集整理的html – 尝试在css中重新创建加载gif全部内容，希望文章能够帮你解决html – 尝试在css中重新创建加载gif所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。