第二个动画圆圈的颜色变化

Change of Colour on second animated circle

本文关键字：颜色 变化 动画 第二个      更新时间：2023-09-26

我用计时器创建了一个动画圆圈。我需要更改第二个圆圈的颜色。

我怎么能做到这一点，因为我无法弄清楚。

这是小提琴

我使用以下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>');

虽然我不太了解jQuery代码（相当复杂），但是要更改第二个圆圈的颜色，您只需要将这种样式添加到当前样式中：

.timer.xs4all > #slice > .pie {
  border-color:green;
}

这是因为第二个圆圈被包裹在具有类timer xs4all的不同div中，而第一个圆圈包裹在具有类timer upc的div中。

小提琴

相关文章：