css背景动态渐变（hsl）

效果图：
背景：

.b {
  width: 100%;
  height: 100vh;
}

.index {
	position:fixed;
	width:100%;
	height:100%;
}
#stars {
	width:100%;
	height: 100%;
}
.star {
	display:block;
	width:5px;
	height:5px;
	border-radius:50%;
	background:#FFF;
	position:absolute;
	transform-origin:100% 0;
	animation:star-ani 4s linear infinite;
	-webkit-animation:star-ani 5s linear infinite;
	box-shadow:0 0 5px 5px rgba(255,255,255,.3);
	opacity:0;
	z-index:2;
}
.star:after {
	content:'';
	display:block;
	top:0px;
	left:4px;
	border:0px solid #fff;
	border-width:0px 90px 2px 90px;
	border-color:transparent transparent transparent rgba(255,255,255,.3);
	transform:rotate(-45deg) translate3d(1px,3px,0);
	box-shadow:0 0 1px 0 rgba(255,255,255,.1);
	transform-origin:0% 100%;
}
@keyframes star-ani {
   0% {
	opacity:0;
	transform:scale(0) translate3d(0,0,0);
  }
  20% {
    opacity:0.8;
    transform:scale(0.2) translate3d(-100px,100px,0);
  }
  40% {
    opacity:0.8;
    transform:scale(0.4) translate3d(-200px,200px,0);
  }
  60% {
    opacity:0.8;
    transform:scale(0.6) translate3d(-300px,300px,0);
  }
  80% {
    opacity:1;
    transform:scale(1) translate3d(-350px,350px,0);
  }
  100% {
    opacity:1;
    transform:scale(1.2) translate3d(-400px,380px,0);
  }
}
----------------------------------------------------------------
<div class="b">
  <!-- 流星 -->
  <div class="index">
      <div id="stars">
          <div class="star" style="top: 0px;left: 500px;"></div>
      </div>
  </div>
</div>
----------------------------------------------------------------
//渐变
var div = document.getElementsByClassName('b')[0];
var num = 0;
setInterval(function () {
  if (num == 360) {
    num = 0
  };
  num ++;
     div.style.background = 'linear-gradient(hsl('+num+',50%,50%), hsl('+(num+60)+',50%,50%))';
},100)

//流星
var stars = document.getElementById('stars')
// js随机生成流星
for (var j = 0; j < 20; j++) {
    var newStar = document.createElement("div")
    newStar.className = "star"
    newStar.style.top = randomDistance(500, -100) + 'px'
    newStar.style.left = randomDistance(1980, 300) + 'px'
    stars.appendChild(newStar)
}
// 封装随机数方法
function randomDistance(max, min) {
    var distance = Math.floor(Math.random() * (max - min + 1) + min)
    return distance
}
var star = document.getElementsByClassName('star')
// 给流星添加动画延时
for (var i = 0, len = star.length; i < len; i++) {　　
    star[i].style.animationDelay = i % 6 == 0 ? '0s' : i * 0.8 + 's'
}