<div class="mouse">  
  <div class="mouse-icon">
    <span class="mouse-wheel"></span>
  </div>
  
</div>
<style>
  .mouse {
  margin: 50px auto;
  width: 100px;
}

.mouse-icon {
   width: 25px;
   height: 45px;
   border: 2px solid white; /*you can change 'white' to a hex color*/
   border-radius: 15px;
   cursor: pointer;
   position: relative;
   text-align: center;
}
.mouse-wheel {
  height: 6px;
  margin: 2px auto 0;
  display: block;
  width: 3px;
  background-color: white; /*you can change 'white' to a hex color*/
  border-radius: 50%;
  -webkit-animation: 1.6s ease infinite wheel-up-down;
 -moz-animation: 1.6s ease infinite wheel-up-down;
  animation: 1.6s ease infinite wheel-up-down;
}
@-webkit-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}
@-moz-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}@keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}
</style>