本文介绍了尝试在css中重新创建加载gif的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I'm trying to recreate the following gif in pure css -

Css here - - (webkit / chrome only at the mo)

Css here - http://codepen.io/anon/pen/FmCaL - (webkit/chrome only at the mo)

我试图通过使用before& amp;在psuedo选择器后,但我不能得到正确的角度。

I'm attempting to recreate the missing chunk of the circle by using the before & after psuedo selectors, but I can't get the angles right.

甚至可以做吗?有更好的方法吗?

Is it even possible to do? Is there a better approach?

感谢您的帮助。我应该指定,我需要的箭头是透明的。我不能对圆的缺少部分使用纯色。

Thanks for any help so far. I should have specified that I need the arrow to be transparent. I can't use a solid color for the missing part of the circle.

推荐答案

如何简单这样做?

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






这里使用:之后 pseudo将元素的绝对位置定位到圆,并使用 transform 属性旋转三角形。


Explanation: What we are doing here is using :after pseudo to position the element absolute to the circle and using transform property to rotate the triangle.

(带动画)

Demo 2 (With animation)

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


My Suggestion: As you updated your qustion, you said you wanted a transparent gutter, I would suggest you to use a .png image and rotate it, rather than writing 100 lines of CSS and worrying about cross browser compatibility. Alternatively as I've shared a link in the comments, you can use CSS masking.

这篇关于尝试在css中重新创建加载gif的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-01 20:18