如何逐个在表盘中传播颜色

Question

我为我的练习制作了小米时钟,但有一个问题,我不能制作色彩表盘.我希望逐个在表盘中传播白色,并且它以三角形和后面的表盘不透明度减少.

这是我想要实现的IMG: -

视频 :- https://vimeo.com/262815342

Codepen

var clock = "";

for(var i = 0; i < 360; i++){
	clock += "<div id='dials'><div id='cutline'></div></div>";
}
//clock += "<div id='circle'></div>";
clock += "<div id='dot'></div>";
clock += "<div id='mline'></div>";
clock += "<div id='hline'></div>";
clock += "<div id='tringleM'><div id='tringle'></div><div class='shadow'></div></div>";

document.getElementById('container').innerHTML = clock;

for (var i = 1; i <= 360; i++) {
	document.querySelector('#dials:nth-child('+i+')').style.transform = "rotate("+ (i-1) +"deg)";
}

/* Real Time Clock */
var hour, min, lol, lol1, lol2, second;

second = moment().second() * 6;

setInterval( function(){ 
//var min = moment().minutes()
//console.log("min:-"+min);
hour = moment().hours();
//console.log("hour:-"+hour);
//var time = moment();
//console.log(time);
min = moment().minutes() * 6;
//console.log(min);
hour = moment().hours() % 12 / 12 * 360 + (min / 12);
//console.log(hour);
lol = document.getElementById('mline').style.transform = "rotate("+ ( 180 + min ) + "deg)";
//console.log(lol);
lol1 = document.getElementById('hline').style.transform = "rotate("+ ( 180 + hour ) + "deg)";
//console.log(lol1);

}, 1000);


setInterval(function(){
	second++;
	lol2 = document.getElementById('tringleM').style.transform = "rotate("+ (180 + second ) + "deg)";
}, (60/360)*1000);

body{
  background-color: white;
}
#container{
  position: relative;
  width: 420px;
  height: 420px;
  padding: 10px;
  background-color: #4682B4;
  transform: scale(1.44);
  transform-origin: 0 0;
}
#dials{
  position: absolute;
  top: 40px;
  left: 50%;
  width: 1px;
  height: 180px;
  transform-origin: bottom center;
}
#cutline{
  background-color: white;
  width: 1px;
  height: 20px;
  opacity: 0.5;
}
#img{
  position: absolute;
  top: 15px;
  left: 20px;
  width: 600px;
}
#circle{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 150px);
  border: 1px solid white;
}
#dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  margin: -10px;
  left: 50%;
  top: 50%;
  border: 5px solid white;
  background: #4682B4;
  z-index: 1001;
}
#mline, #hline{
  position: absolute;
  top: calc(50% - 1px);
  left: calc(50% - 1px);
  width: 2px;
  height: 140px;
  background-color: white;
  transform-origin: top center;
  transform: rotate(180deg);
}
#hline{
  height: 70px;
  opacity: 0.6;
}
#tringle{
  width: 0;
  height: 0;
  position: absolute;
  top: 100%;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid white;
}
/*.shadow{
  height: 20px;
  width: 50px;
  position: absolute;
  bottom: -40%;
  left: calc(50% - 25px);
  transform-origin: top center;
  transform: rotate(180deg);
  background: red;
}*/
#tringleM{
  width: 20px;
  height: 140px;
  position: absolute;
  top: 50%;
  left: calc(50% - 10px);
  transform-origin: top center;
  transform: rotate(180deg);
  transition: all 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
<div id="container"></div>
<img id="img" src="https://i.stack.imgur.com/t7EkM.png">