借助CSS3 mask遮罩和conic-gradient实现的多彩圆环实例页面

回到相关文章 »

效果：

代码：

CSS代码：

.circle {
    width: 300px; height: 300px;
    background: conic-gradient(#9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604);
    border-radius: 50%;
    -webkit-mask: radial-gradient(transparent, transparent 110px, #000 110px);
    mask: radial-gradient(transparent 110px, #000 110px);
    transition: clip-path .2s;
}
.second {
    ...
}

HTML代码：

<div id="circle" class="circle"></div>
<div id="seconds" class="second"></div>

JS代码：

// 参见页面源代码