CSS3和GIF加载圈[重复]答案

【问题标题】：CSS3 & GIF Loading Circle [duplicate]CSS3和GIF加载圈[重复]
【发布时间】：2012-12-10 06:37:01
【问题描述】：

可能重复：
CSS3 Continous Rotate Animation (Just like a loading sundial)

我有这个简单的 GIF 加载圈。像这样的东西有可能只用 CSS3 编码吗？任何帮助深表感谢。

【问题讨论】：

标签： html css

【解决方案1】：

HTML：

<div class="arc-hider"></div>

CSS：

@-webkit-keyframes rotate { 
    from { -webkit-transform: rotate(0deg) }
    to { -webkit-transform: rotate(360deg) }
}
@-moz-keyframes rotate { 
    from { -moz-transform: rotate(0deg) }
    to { -moz-transform: rotate(360deg) }
}
@-o-keyframes rotate { 
    from { -o-transform: rotate(0deg) }
    to { -o-transform: rotate(180deg) }
}
@-ms-keyframes rotate { 
    from { -ms-transform: rotate(0deg) }
    to { -ms-transform: rotate(360deg) }
}
.arc-hider {
    width: 30px;
    height: 30px;
    border-radius: 60px;
    border: 6px solid #36669F;
    position: absolute;
    left: 45%;
    z-index: 5;
    clip: rect(0px 21px 21px 0px);
    -webkit-animation: rotate 2s linear infinite 0s;-moz-animation: rotate 2s linear infinite 0s;-o-animation: rotate 2s linear infinite 0s;-ms-animation: rotate 2s linear infinite 0s;
    animation: rotate 2s linear infinite 0s;
}

应该做的伎俩

Live Demo | Source

【讨论】：