SOURCE

<section class="scroll">
  <div class="cont-mouse">
    <div class="mouse">
      <div class="flechas">
        <div class="arriba">
          <div class="fl"></div>
          <div class="fl"></div>
        </div>
        <div class="arriba">
          <div class="flb"></div>
          <div class="flb"></div>
        </div>
      </div>
      <div class="rcont">
        <div class="ruedita"></div>
      </div>
    </div>
    <p>Scroll</p>
    <p>for more</p>
  </div>
</section>

/*
============================================
			GLOBAL
============================================
*/
body{
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
}
/*
============================================
			KEYFRAMES
============================================
*/
@keyframes ruedita{
	0%{
		transform: translateY(-2px);
	}
	50%{
		transform: translateY(2px);
	}
	100%{
		transform: translateY(-2px);
	}
}
@keyframes flechitas{
	0%{
		opacity: 0.1;
	}
	50%{
		opacity: 0.25;
	}
	100%{
		opacity: 0.1;
	}
}

/*
============================================
			ANIMACION DE INICIO
============================================
*/
.scroll{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100vh;
	left: 0;
	top: 0;
	z-index: 1000;
	color:white;
  .cont-mouse{
  	background-color: rgba(#44347a, 0.8);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: center;
  }
	.mouse{
		width: 33px; 
		height: 60px;
		border-radius: 60px;
		border: solid 3px white;
		margin-bottom: 10px;
		position: relative;
		.rcont{
			width: 100%;
			text-align: center;
			position: absolute;
			left: 0;
			top: 15px;
			.ruedita{
				width: 5px;
				height: 9px;
				border-radius: 3px;
				background-color: white;
				display: block;
				margin: 0 auto;
				animation-name: ruedita;
				animation-duration: 1s;
				animation-iteration-count: infinite;
        animation-timing-function: ease-out;
			}
		}
		.flechas{
			position: absolute;
			top: 1px;
			left: 0;
			background-image: url(../../img/flechas.svg);
			width: 100%;
			height: 29px;
			background-position: center;
			background-size: auto 100%;
			animation-name: flechitas;
			animation-duration: 1s;
			animation-iteration-count: infinite;
      text-align: center;
      padding: 4px 0;
      .fl, .flb{
        border-left: solid 1px white;
        border-top: solid 1px white;
        width: 4px;
        height: 4px;
        transform: rotate(45deg);
        display: block;
        margin: 0 auto;
      }
      .flb{
        transform: rotate(225deg);
      }
      .arriba{
        margin-bottom: 7px;
      }
		}
	}
}