#AD 50 Projects In 50 Days (HTML, CSS & JavaScript) - Sharpen your skills by building 50 mini projects!

Design an animated scrolling mouse icon with CSS

By Michael Burrows | Last modified August 26th 2020 | GitHub Source Code [GitHub]

Scrolling indicators are a common client request.

Whether or not they’re entirely necessary is a matter for another day…

In this tutorial we’ll be creating a simple mouse icon with an animation effect to indicate a scrolling action.

First thing to do is add the following HTML to your page.

<div class="icon-scroll"></div>
Code language: HTML, XML (xml)

Next we’ll add the style to create the basic shape of the mouse.

.icon-scroll { width: 20px; height: 30px; background: #ccc; border: 2px solid #bbb; border-radius: 10px; display: flex; justify-content: center; margin: auto; position: relative; box-shadow: 3px 3px 5px -5px #000; }
Code language: CSS (css)

Using the CSS ::before selector we can create a pseudo-element to represent the scroll wheel.

.icon-scroll::before { content: ""; width: 4px; height: 10px; background: #eee; border-radius: 2px; margin-top: 5px; }
Code language: CSS (css)

And using the CSS ::after selector we can add a small square that we’ll animate.

.icon-scroll::after { content: ""; width: 4px; height: 3px; background-color: #bbb; position: absolute; display: block; animation: scroll ease 1s infinite; }
Code language: CSS (css)

Lastly the animation that shifts and fades .icon-scroll::after in an infinite loop.

@keyframes scroll { from { top: 5px; } to { top: 18px; } 100% { opacity: 0; } }
Code language: CSS (css)

Related Posts