Question

我~~创建了~~用计时器偷走了一个动画圈。我需要改变圆形动画拱的宽度。

我怎么能这样做，因为我无法弄清楚。

我使用以下CSS附加动画拱门的宽度：

CSS：

.timer > #slice > .pie {
    border: 5px solid blue;
    position:absolute;
    width:160px; /* 170 - (2 * border width) */
    height:160px; /* 170 - (2 * border width) */
    clip:rect(0em,0.5em,1em,0em);
    -moz-border-radius:0.5em;
    -webkit-border-radius:0.5em; 
    border-radius:0.5em; 
}

JS：

$('div.timer'+instance).html('<div class="percent"></div><div id="slice"'+(percent > 50?' class="gt50"':'')+'><div class="pie"></div>'+(percent > 50?'<div class="pie fill"></div>':'')+'</div>');

Answer 1

JsFiddle

您可以在.timer > #slice > .pie{

中执行此操作

.timer > #slice > .pie {
  border: 10px solid blue;
  position:absolute;
  width:150px; /* 170 - (2 * border width) */
  height:150px; /* 170 - (2 * border width) */
  clip:rect(0em,0.5em,1em,0em);
  -moz-border-radius:0.5em;
  -webkit-border-radius:0.5em; 
  border-radius:0.5em; 
}

我将border尺寸加倍，然后将width和height 10px缩小。

Answer 2

你必须对width属性进行更改。更改像素级别然后它将适合你

width:160px; /* 170 - (2 * border width) */

例如： - width:190px;

增加Circle上动画拱的宽度

2 个答案: