Skip to content

Instantly share code, notes, and snippets.

@GrzegorzPerko
Created August 31, 2015 12:30
Show Gist options
  • Save GrzegorzPerko/69ca7aaa6e2382def8c9 to your computer and use it in GitHub Desktop.
Save GrzegorzPerko/69ca7aaa6e2382def8c9 to your computer and use it in GitHub Desktop.
.mousescroll {
border: 3px solid #FFF;
width: 30px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -15px;
border-radius: 15px;
}
.mousescroll:after {
top: 55px;
width: 100px;
text-align: center;
content: 'scrolluj w dół';
position: absolute;
left: 50%;
margin-left: -50px;
font-size: 10px;
text-transform: uppercase;
}
.mousescroll:before {
left: 50%;
top: 35px;
content: '';
position: absolute;
margin-left: -4px;
width:0px;
height:0px;
border-right:4px solid transparent;
border-left:4px solid transparent;
border-bottom:4px solid #FFF;
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.mousescroll:before {
animation-name: arrowmouse;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes arrowmouse {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
.mousescroll .bullet {
width: 5px;
position: relative;
height: 5px;
margin: auto;
margin-bottom: 3px;
background: #FFF;
border-radius: 3px;
}
.mousescroll .bullet.b1 {
margin-top: -10px
}
.mousescroll .bullet.b1 {
opacity: 0;
animation-name: b1;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.mousescroll .bullet.b2 {
opacity: 0;
animation-name: b2;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.mousescroll .bullet.b3 {
animation-name: b3;
animation-duration: 2s;
animation-iteration-count: infinite;
opacity: 0;
}
.mousescroll .bullet.b4 {
animation-name: b4;
animation-duration: 2s;
animation-iteration-count: infinite;
opacity: 1;
}
.mousescroll .bullet.b5 {
animation-name: b5;
animation-duration: 2s;
animation-iteration-count: infinite;
opacity: 1;
}
.mousescroll .bullet.b6 {
animation-name: b6;
animation-duration: 2s;
animation-iteration-count: infinite;
opacity: 1;
}
@keyframes b1 {
0% {opacity: 0; top: 0;}
20% {opacity: 0; top: 8px;}
40% {opacity: 0.5; top: 16px;}
60% {opacity: 1; top: 24px;}
80% {opacity: 0.5; top: 32px;}
100% {opacity: 0; top: 40px;}
}
@keyframes b2 {
0% {opacity: 0; top: 0;}
20% {opacity: 0.5; top: 8px;}
40% {opacity: 1; top: 16px;}
60% {opacity: 0.5; top: 24px;}
80% {opacity: 0; top: 32px;}
100% {opacity: 0; top: -8px;}
}
@keyframes b3 {
0% {opacity: 0.5; top: 0;}
20% {opacity: 1; top: 8px;}
40% {opacity: 0.5; top: 16px;}
60% {opacity: 0; top: 24px;}
80% {opacity: 0; top: -16px;}
100% {opacity: 0; top: -8px;}
}
@keyframes b4 {
0% {opacity: 1; top: 0;}
20% {opacity: 0.5; top: 8px;}
40% {opacity: 0; top: 16px;}
60% {opacity: 0; top: -24px;}
80% {opacity: 0; top: -16px;}
100% {opacity: 0.5; top: -8px;}
}
@keyframes b5 {
0% {opacity: 0.5; top: 0;}
20% {opacity: 0; top: 8px;}
40% {opacity: 0; top: -32px;}
60% {opacity: 0; top: -24px;}
80% {opacity: 0.5; top: -16px;}
100% {opacity: 1; top: -8px;}
}
@keyframes b6 {
0% {opacity: 0; top: 0;}
20% {opacity: 0; top: -40px;}
40% {opacity: 0; top: -32;}
60% {opacity: 0.5; top: -24px;}
80% {opacity: 1; top: -16px;}
100% {opacity: 0.5; top: -8px;}
}
<div class="mousescroll">
<div class="bullet b1"></div>
<div class="bullet b2"></div>
<div class="bullet b3"></div>
<div class="bullet b4"></div>
<div class="bullet b5"></div>
<div class="bullet b6"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment