moovix

Анимированная иконка прокрутки на чистом CSS

Moovix » Блог » Анимированная иконка прокрутки на чистом CSS

HTML

				
					<div id="mouse">
 <div id="wheel"></div>
 <div class="scroll"></div>
 <div class="scroll2"></div>
 <div class="scroll3"></div>
</div>
<div id="text">SCROLL</div>
				
			

CSS

				
					@import url(https://fonts.googleapis.com/css?family=Lato:100);
body {
  background-color: #333;
}
#mouse{
   margin-top: 5em;
   margin-left:auto;
   margin-right:auto;
   width:3.5em;
   height:6em;
   background-color:rgba(255,255,255,0);
   border-radius: 100px;
   border:2px solid white;
}
#wheel{
  margin-top:1em;
  margin-left:auto;
  margin-right:auto;
  width:0.75em;
  height:0.75em;
  background-color:white;
  border-radius: 50%;
}
.scroll2{
  opacity:0;
   margin-left:auto;
   margin-right:auto;
   width:0px;
   height:0px;
  border-left: 0.35em solid transparent;
	border-right: 0.35em solid transparent;
	border-top: 0.4em solid white;
   -webkit-animation: down2 1s infinite;
   animation: down2 1s infinite;
}
.scroll3{
   opacity:0;
   margin-left:auto;
   margin-right:auto;
   width:0px;
   height:0px;
  border-left: 0.35em solid transparent;
	border-right: 0.35em solid transparent;
	border-top: 0.4em solid white;
   -webkit-animation: down 1s infinite;
   animation: down 1s infinite;
}
.scroll{
  opacity:0;
   margin-left:auto;
   margin-right:auto;
   width:0px;
   height:0px;
  border-left: 0.35em solid transparent;
	border-right: 0.35em solid transparent;
	border-top: 0.4em solid white;
   -webkit-animation: down3 1s infinite;
  animation: down3 1s infinite;
}
@-webkit-keyframes down{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
    transform: translateY(2.3em);
  }
}
@-webkit-keyframes down2{
  40%{
    opacity:0;
  }
  100%{
    opacity:0.5;
    transform: translateY(2.3em);
  }
}
@-webkit-keyframes down3{
  60%{
    opacity:0;
  }
  100%{
    opacity:0.2;
    transform: translateY(2.3em);
  }
}
@keyframes down{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
    transform: translateY(2.3em);
  }
}
@keyframes down2{
  40%{
    opacity:0;
  }
  100%{
    opacity:0.5;
    transform: translateY(2.3em);
  }
}
@keyframes down3{
  60%{
    opacity:0;
  }
  100%{
    opacity:0.2;
    transform: translateY(2.3em);
  }
}
#text{
  font-family:"Lato";
  font-size:1em;
  text-align:center;
  margin-top:0.5em;
  color:white;
}
				
			
Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Moovix » Блог » Анимированная иконка прокрутки на чистом CSS

Есть вопрос? мы онлайн

Есть проект? Заполните бриф.

top