Анимированная иконка прокрутки на чистом CSS
- 18 октября, 2022
- 8:17 пп
- Нет комментариев
HTML
SCROLL
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;
}