Skip to content

Instantly share code, notes, and snippets.

@agragregra
Created October 31, 2015 14:52
Show Gist options
  • Save agragregra/d628a19e823d5a10ae56 to your computer and use it in GitHub Desktop.
Save agragregra/d628a19e823d5a10ae56 to your computer and use it in GitHub Desktop.
Mouse Wheel Animation CSS Icon | http://jsfiddle.net/cmajo9h6/
<style>
/* ---------------------------------------------- /*
* Mouse animate icon
/* ---------------------------------------------- */
.mouse-icon {
border: 2px solid #000;
border-radius: 16px;
height: 40px;
width: 24px;
display: block;
z-index: 10;
opacity: 0.7;
}
.mouse-icon .wheel {
-webkit-animation-name: drop;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
-webkit-animation-name: drop;
animation-name: drop;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-play-state: running;
animation-play-state: running;
}
.mouse-icon .wheel {
position: relative;
border-radius: 10px;
background: #000;
width: 2px;
height: 6px;
top: 4px;
margin-left: auto;
margin-right: auto;
}
@-webkit-keyframes drop {
0% {
top: 5px;
opacity: 0;
}
30% {
top: 10px;
opacity: 1;
}
100% {
top: 25px;
opacity: 0;
}
}
@keyframes drop {
0% {
top: 5px;
opacity: 0;
}
30% {
top: 10px;
opacity: 1;
}
100% {
top: 25px;
opacity: 0;
}
}
</style>
<div class="mouse-icon"><div class="wheel"></div></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment