46 lines
954 B
SCSS
46 lines
954 B
SCSS
|
.ps-logo {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
width: 100px;
|
||
|
|
|
||
|
|
&--base {
|
||
|
|
animation-name: rotate;
|
||
|
|
animation-duration: 0.3s;
|
||
|
|
animation-timing-function: linear;
|
||
|
|
animation-play-state: paused;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
animation-play-state: running;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-child(2n) &--base { animation-delay: -0.1s; }
|
||
|
|
&:nth-child(3n) &--base { animation-delay: -0.3s; }
|
||
|
|
&:nth-child(5n) &--base { animation-delay: -0.5s; }
|
||
|
|
&:nth-child(7n) &--base { animation-delay: -7s; }
|
||
|
|
&:nth-child(11n) &--base { animation-delay: -0.9s; }
|
||
|
|
&:nth-child(13n) &--base { animation-delay: -1s; }
|
||
|
|
|
||
|
|
&--base::before {
|
||
|
|
position: absolute;
|
||
|
|
display: block;
|
||
|
|
content: '';
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotate {
|
||
|
|
0% {
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|