Scroll Down Mouse Animation CSS (Code Snippet)

<div class="mouse-scroll">
  <div class="mouse">
    <div class="wheel"></div>
  </div>
  <div class="arrow-scroll">
    <span>&#8595;</span>
  </div>
</div>

.mouse-scroll {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 50px;
}
.mouse {
  width: 30px;
  height: 50px;
  border: 2px solid #374151;
  border-radius: 20px;
  position: relative;
}
.wheel {
  width: 4px;
  height: 8px;
  background: #374151;
  border-radius: 2px;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll 1.5s infinite;
}
.arrow-scroll {
  color: #374151;
  animation: fade 1.5s infinite;
}
@keyframes scroll {
  0% { top: 10px; opacity: 1; }
  100% { top: 30px; opacity: 0; }
}
@keyframes fade {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

Scroll Down Mouse Animation CSS

Share Code Snippet