About this snippet

Tell users to scroll down with this animated mouse icon. It replaces boring text with a modern visual cue, and the animation loops subtly to grab attention without being distracting.

Size
965 bytes
Uses
HTML, CSS
Loads
Nothing external
Views
530
<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; }
}
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source

Keyboard shortcuts

Save