html Scroll Down Indicator es un SVG con movimiento para indicar que el usuario debe scrollear。

Posted 2021-05-11

.scrollIndicator{
  position: relative;
  width: 22px;
  height: 34px;
  svg{
    height: 34px;
    width: 22px;
    path{
      stroke: #333;
      stroke-width: 2px;
      stroke-dasharray: 200;
      stroke-dashoffset: 100;
      fill: rgba(255, 255, 255, 0);
      animation-name: mouse;
      animation-duration: 1.5s;
      animation-iteration-count: 1;
      -webkit-transition: fill 350ms ease;
      -moz-transition: fill 350ms ease;
      -ms-transition: fill 350ms ease;
      -o-transition: fill 350ms ease;
      transition: fill 350ms ease;
    }
  }
  div{
    background-color: #333;
    width: 4px;
    height: 4px;
    position: absolute;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-animation: scrollIndicator 1s infinite; /* Safari 4.0 - 8.0 */
    animation: scrollIndicator 1s infinite;
  }
}

@keyframes scrollIndicator{
  0%{
    top: 20%;
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100%{
    top: 70%;
    opacity: 0;
  }
}

<div class="scrollIndicator">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 34">
    <path class="st0" d="M11,33L11,33C5.5,33,1,28.5,1,23V11C1,5.5,5.5,1,11,1h0c5.5,0,10,4.5,10,10v12C21,28.5,16.5,33,11,33z"></path>
  </svg>
  <div></div>
</div>