SOURCE

var canvas = document.getElementById('langcanvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.parentNode.offsetWidth;
canvas.height = canvas.parentNode.offsetHeight;
window.requestAnimFrame = (function() {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
  function(callback) {
    window.setTimeout(callback, 1000 / 60);
  };
})();
var step = 0;
var lines = ["rgba(0,98,222, 0.3)", "rgba(0,51,116, 0.6)", "rgba(0,51,116, 0.9)"];
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  step++;
  for (var j = lines.length - 1; j >= 0; j--) {
    ctx.fillStyle = lines[j];
    var angle = (step + j * 15) * Math.PI / 180;
    var deltaHeight = Math.sin(angle) * 50;
    var deltaHeightRight = Math.cos(angle) * 50;
    ctx.beginPath();
    ctx.moveTo(0, canvas.height / 2 + deltaHeight);
    ctx.bezierCurveTo(canvas.width / 2, canvas.height / 2 + deltaHeight - 50, canvas.width / 2, canvas.height / 2 + deltaHeightRight - 50, canvas.width, canvas.height / 2 + deltaHeightRight);
    ctx.lineTo(canvas.width, canvas.height);
    ctx.lineTo(0, canvas.height);
    ctx.lineTo(0, canvas.height / 2 + deltaHeight);
    ctx.closePath();
    ctx.fill();
  }
  requestAnimFrame(loop);
}
loop();

<div class="month">
  <img class="yue" src="http://www.zhangdanteng.com/wp-content/uploads/2016/09/yue.png"
  />
</div>
<div class="lang">
  <section class="doc">
    <canvas id="langcanvas">
    </canvas>
  </section>
</div>
<p>
海上生明月，天涯共此时。<br/>
情人怨遥夜，竟夕起相思。<br/>
灭烛怜光满，披衣觉露滋。<br/>
不堪盈手赠，还寝梦佳期。<br/>
</p>
<!-- <div class="bgimg"></div> -->
<div class="constellation stars">
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
  <div class="star">
  </div>
</div>

*{
  margin:0;
  padding:0;
}
body {
  background:#012047;
  overflow: hidden;
  animation: bg 10s;
	-moz-animation: bg 10s;	/* Firefox */
  -webkit-animation: bg 10s;	/* Safari 和 Chrome */
  -o-animation: bg 10s;	/* Opera */
}
.constellation {
    width: 100%;
    height: 300px;
    position: absolute;
}
.star {
  background-color: #fee9bb;
  border-radius: 50%;
  position: absolute;
}
@for $i from 1 through 401 {
  .star:nth-child(#{$i}) { 
    top: random(1080) + px;
    left: random(1920) + px;
    $sizeStar: random(6) + px;
    width: $sizeStar;
    height: $sizeStar;
    animation: blink $i * .1s  infinite;
  }
}

@keyframes bg
{
0%   {background: #fee9bb;}
100% {background: #012047;}
}

@-moz-keyframes bg /* Firefox */
{
0%   {background: #fee9bb;}
100% {background: #012047;}
}

@-webkit-keyframes bg /* Safari 和 Chrome */
{
0%   {background: #fee9bb;}
100% {background: #012047;}
}

@-o-keyframes bg /* Opera */
{
0%   {background: #fee9bb;}
100% {background: #012047;}
}

p{
  font-family:"楷体";
  font-size:24px;
  color:#fee9bb;
  position: absolute;
  top: 30%;
  right:25%;
}
.lang{
  position:absolute;
  bottom:0;
  width: 100%;
  height:auto;
}
.doc {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 300px;
}
#langcanvas {
  position: absolute;
  top: 0px;
  z-index: 3;
  height: auto;
}
.month img{
  width:200px;
  position:absolute;
  left:20%;
  top:10%;
}
.month .yue{
  z-index:2;
  animation-name:months;
  animation-timing-function: cubic-bezier(0.42, 0, 0.24, 0.79);
  animation-duration:8s;
  animation-delay:0;
  animation-iteration-count:1;
	
  -moz-animation-name:months;
  -moz-animation-timing-function: cubic-bezier(0.42, 0, 0.24, 0.79);
  -moz-animation-duration:8s;
  -moz-animation-delay:0;
  -moz-animation-iteration-count:1;
  
  -webkit-animation-name:months;
  -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.24, 0.79);
  -webkit-animation-duration:8s;
  -webkit-animation-delay:0;
  -webkit-animation-iteration-count:1;
  
  -o-animation-name:months;
  -o-animation-timing-function: cubic-bezier(0.42, 0, 0.24, 0.79);
  -o-animation-duration:8s;
  -o-animation-delay:0;
  -o-animation-iteration-count:1;
}
@keyframes months
{
  0%   {top:70%;}
  100% {top:10%;}
}
@-moz-keyframes months /* Firefox */
{
  0%   {top:70%;}
  100% {top:10%;}
}
@-webkit-keyframes months /* Safari 和 Chrome */
{
  0%   {top:70%;}
  100% {top:10%;}
}
@-o-keyframes months /* Opera */
{
  0%   {top:70%;}
  100% {top:10%;}
}