借助CSS3 filter模糊和clip实现的多彩圆环实例页面

CSS代码：

.circle {
    width: 300px; height: 300px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: clip-path .2s;
    -webkit-mask: radial-gradient(transparent, transparent 110px, #000 110px);
    mask: radial-gradient(transparent 110px, #000 110px);
}
.circle-group {
    width: 100%; height: 100%;
    position: absolute;
    left: 0; top: 0;    
    -webkit-filter: blur(15px);
    filter: blur(15px);
    transform: scale(1.2);
}
.circle-group i {
    width: 100%; height: 100%;
    clip: rect(0 300px 300px 150px);
    position: absolute;
    overflow: hidden;
}
.circle-group i::after {
    content: '';
    width: 100%; height: 100%;
    background: currentColor;
    position: absolute;
    clip: rect(0 150px 300px 0);
    transform: rotate(31deg);
    border-radius: 50%;
}

.circle-group i:nth-of-type(1) {
    transform: rotate(0);
    color: #9ED110;    
}
.circle-group i:nth-of-type(2) {
    transform: rotate(30deg);
    color: #50B517;    
}
/* ... 一直到12 */

.second {
    ...
}
                

HTML代码：

<div id="circle" class="circle">
    <div class="circle-group">
        <i></i><i></i><i></i><i></i>
        <i></i><i></i><i></i><i></i>
        <i></i><i></i><i></i><i></i>
    </div>
</div>
<div id="seconds" class="second"></div>
                

JS代码：

// 参见页面源代码