SOURCE

<div class="node" style="top:5px;left:50%;margin-left:-25px"></div>
	<div class="node" style="top:250px;left:50px;margin-left:-25px"></div>
	<div class="node" style="top:250px;left:600px;margin-left:-25px"></div>
	<div class="node" style="top:250px;left:475px;margin-left:-25px"></div>
	<div class="node" style="top:250px;left:350px;margin-left:-25px"></div>
	<div class="vert-line" style="width:100px;top:102px;left:50%;margin-left:-50px">
		<div class="color-point move-point"></div>
	</div>
	<div class="hori-line" style="width:200px;top:150px;left:50%;margin-left:-200px">
		<div class="reverse-color-point reverse-move-point"></div>
	</div>
	<div class="hori-line" style="width:200px;top:150px;left:50%">
		<div class="color-point move-point"></div>
	</div>

body{
	margin:0;
}
.hori-line,.vert-line{
	width:0;
	height:5px;
	background-color:#69ca62;
	border-radius: 1px;
	position: absolute;
}
.vert-line{
	transform:rotate(90deg);
	-ms-transform:rotate(90deg); 	/* IE 9 */
	-moz-transform:rotate(90deg); 	/* Firefox */
	-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
	-o-transform:rotate(90deg); 
}
.node{
	width:50px;
	height:50px;
	width: 50px;
  height: 50px;
  position: absolute;
  border-radius: 2px;
  background-color: #00c1ec;
}
.color-point{
	position: absolute;
	width:10px;
	height:5px;
	border-radius: 1px 4px 4px 1px;
	background: #03001e;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #fdeff9, #ec38bc, #7303c0, #03001e);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #fdeff9, #ec38bc, #7303c0, #03001e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.reverse-color-point{
	position: absolute;
	width:10px;
	height:5px;
	border-radius: 1px 4px 4px 1px;
	background: #03001e;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #fdeff9, #ec38bc, #7303c0, #03001e);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #fdeff9, #ec38bc, #7303c0, #03001e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.move-point{
	animation: move 1s linear infinite;
	-moz-animation: move 1s linear infinite; /* Firefox */
	-webkit-animation: move 1s linear infinite; /* Safari and Chrome */
	-o-animation: move 1s linear infinite; /* Opera */
}
.reverse-move-point{
	animation: reverse-move 1s linear infinite;
	-moz-animation: reverse-move 1s linear infinite; /* Firefox */
	-webkit-animation: reverse-move 1s linear infinite; /* Safari and Chrome */
	-o-animation: reverse-move 1s linear infinite; /* Opera */
}
@keyframes move {
	0% {
		left:0;
	}	
	100%{
		left:100%;
		margin-left:-10px
	}
}
@keyframes reverse-move {
	0% {
		left:100%;
		margin-left:-10px
	}	
	100%{
		left:0;
	}
}