Skip to content

Instantly share code, notes, and snippets.

@matheusmisumoto

matheusmisumoto/mouse-scroll-animated-icon.html

Created September 16, 2021 03:00
Show Gist options
  • Save matheusmisumoto/b0e73ea235a44a15967264c384a45079 to your computer and use it in GitHub Desktop.
Save matheusmisumoto/b0e73ea235a44a15967264c384a45079 to your computer and use it in GitHub Desktop.
Download ZIP
Create a animated mouse scroll icon only using CSS
Raw
mouse-scroll-animated-icon.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animated mouse scroll icon</title>
<style>
body {
background-color: #000;
}
.cover {
width: 100vw;
height: 100vh;
}
.cover h1 {
text-align: center;
color: #FFF;
}
.cover::before {
content: '';
position: absolute;
bottom: 2.5em;
left: calc(50% - 10px);
width: 20px;
height: 30px;
box-shadow: inset 0 0 0 2px #efefef;
border-radius: 25px;
transition: all .25s;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.cover::after {
content: '';
width: 4px;
height: 6px;
background: #efefef;
margin-left: 8px;
bottom: 3.5em;
left: calc(50% - 10px);
border-radius: 2px;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
webkit-animation-name: scroll;
animation-name: scroll-icon;
position: absolute;
transition: background .25s;
}
</style>
</head>
<body>
<div class="cover">
<h1>Hello World!</h1>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment