借助CSS3 linear-gradient线性渐变实现的多彩圆环实例页面

CSS代码：

.circle {
    width: 300px; height: 300px;
    border-radius: 50%;
    position: relative;
    transition: clip-path .2s;
    -webkit-mask: radial-gradient(transparent, transparent 110px, #000 110px);
    mask: radial-gradient(transparent 110px, #000 110px);
    overflow: hidden;
}
.circle-left {
    width: 50%; height: 100%;
    background: linear-gradient(to bottom, #EDE604, #FFCC00, #FEAC00, #FF8100, #FF5800, #FF3BA7, #CC42A2);
    float: left;
}
.circle-right {
    width: 50%; height: 100%;
    float: right;
    background: linear-gradient(to bottom, #9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2);
}
.circle-bottom {
    position: absolute; 
    height: 40px; width: 30px;
    bottom: 3px; left: 0; right: 0;
    margin: auto;
    background: linear-gradient(to right, #DB3FA3, #C443A3);
    filter: blur(5px);
}

.second {
    /* 时间样式，略 */
}
                

HTML代码：

<div id="circle" class="circle">
    <div class="circle-left"></div>
    <div class="circle-right"></div>
    <div class="circle-bottom"></div>
</div>
<div id="seconds" class="second"></div>
                

JS代码：

// 参见页面源代码