Question

搜索了很多，但无法在任何地方找到满意的解决方案。我的目标是在页面加载时顺时针加载圆形图像。它是饼图的图像，我想只使用jquery / css实现这一点。我尝试过使用circleProgress()插件。我在这里使用的想法是预先加载图像，然后用透明的最终颜色显示圆形进度加载。

我的问题是，有更清洁的方法吗？

使用此方法，它显示原始图像的轻微边框，这不是所需的输出。请注意我 NOT 想要旋转图像，只是顺时针加载它。这也不是一个实际的饼图，只是饼图的图像。因此我没有使用过SVG。任何使用jquery animate()或类似内容的建议都会非常有用。感谢。

WORKING DEMO

Answer 1

所以这就是我所做的 - 因为你需要一个图像代替红色圆圈，我们保持不变。但是，我们必须使用包装元素包装圆/图像，并且绝对将两个遮罩元素放在其中，每个遮盖元素覆盖圆/图像的一半（左侧或右侧）。

<div class="circle_wrapper">
    <div class="circle_red"></div>
    <div class="mask_left"></div>
    <div class="mask_right"></div>
</div>

然后我们可以简单地使用CSS3动画来完成这项工作。逻辑很简单：

创建覆盖左右手边的遮罩元素。它们将填充高度，但只有宽度的一半。隐藏溢出。
在每一侧定位相同尺寸的伪元素。为此，我们使用::before元素（或者您可以使用::after，这也没有问题。）
将它们旋转180度，但是以交错的方式（右侧第一个，左侧之后）。诀窍是确保动画状态在其结束状态被冻结，所以请记住使用animation-fill-mode: forwards。

如果您不希望动画在页面加载时立即出现，您可以随时使用JS来切换类名并触发动画。 您应该使用供应商前缀作为animation和@keyframe声明，以便最大限度地提高跨浏览器的兼容性。

如果你希望看到它正常工作，请点击link to the fiddle。如果你想看到它working with a sample image of a pie chart，我也有它。只需记住将图像设置为display: block并定义其尺寸。如果您对确切的机制感到困惑，I have made a fork that makes the individual masks obvious :)

body {
    padding-top: 100px;
    text-align: center;
    background-color:white;
}
.circle_wrapper {
    position: relative;
    width:200px;
    height:200px;
}
.circle_red{ 
    background-color:red; 
    border-radius:50%;
    width:200px;
    height:200px;
}

/* Masks */
.circle_wrapper > div[class^='mask'] {
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
}
.mask_left {
    left: 0;
    right: 50%;
}
.mask_right {
    left: 50%;
    right: 0;
}

/* Pseudo elements in masks */
.circle_wrapper > div[class^='mask']::before {
    background-color: #fff;
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}
.mask_left::before {
    animation: leftHalf 2s 0s 1 linear forwards;
    transform-origin: 100% 50%; /* center right */
}
.mask_right::before {
    animation: rightHalf 2s 0s 1 linear forwards;
    transform-origin: 0% 50%; /* center left */
}


@keyframes leftHalf {
    0%  { transform: rotate(0deg); }
    50% { transform: rotate(0deg); }
    100% { transform: rotate(180deg); }
}
@keyframes rightHalf {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(180deg); }
    100% { transform: rotate(180deg); }
}

请参阅此处的小提琴：http://jsfiddle.net/teddyrised/h1ud4421/20/

以顺时针方式加载div

1 个答案: