← All elements
<div class="center">
<div class="down"></div>
</div>About this animation
The familiar scroll-down hint: an outlined mouse with a wheel dot that slides down and fades, repeated forever.
How it works
An outlined rounded rectangle makes the mouse body. Its before element is the scroll wheel dot that travels down the body and fades on a looping keyframe, and the after element adds a short white bar for the wheel, so the hint appears to keep rolling down.
Ways to customise it
- Change the white border and dot colour.
- Edit the 1s duration.
- Resize the 50px by 80px body.
Good to know
A friendly cue for the bottom of a hero section. Hide it from assistive tools with aria-hidden, since it only repeats what scrolling already does.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.