按顺时针方式加载div
按顺时针方式加载div
提问于 2015-03-27 05:34:15
搜了很多遍，但哪儿都找不到满意的解决办法。我的目标是在页面加载时顺时针加载一个圆形图像。这是一个饼形图的图像，我只想使用jquery/css来实现这一点。我试过使用circleProgress()插件。我在这里使用的想法是预加载图像，然后用透明的末端颜色显示圆周进度负载。
我在这里的问题是，是否有一种更干净的方法来做到这一点？
使用这种方法，它显示了原始图像的一个细微的边框，而这不是期望的输出。请注意，我做的不是想要旋转的图像，只是它被顺时针加载。这也不是一个实际的饼图，只是饼图的图像。因此，我没有使用SVG。使用jquery animate()或诸如此类的任何建议都将非常有用。谢谢。
工作演示
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-03-27 06:09:14
这就是我所做的--因为你需要一个图像来代替红色的圆圈，我们不去碰它。但是，我们必须用包装器元素包装圆/图像，并且绝对将两个掩蔽元素放置在其中，每个掩蔽元素覆盖圆/图像的一半(左侧或右侧)。
<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声明使用供应商前缀，以便最大限度地实现跨浏览器的兼容性。
这是连到小提琴上，如果你想看到它在右边工作。如果你想看的话，处理饼图的示例图像，我也有。只需记住将图像设置为display: block并定义其维度。如果您对确切的机制感到困惑，我做了个叉子，让每个人的面具都很明显 :)
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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29293968
复制相关文章
相似问题
腾讯云开发者
