60 lines
1.5 KiB
SCSS
60 lines
1.5 KiB
SCSS
@import './../../../styles/global';
|
|
|
|
@keyframes c-star-background--wobble {
|
|
0% {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
.c-star-background {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: $s-z--background;
|
|
|
|
&__inner {
|
|
position: relative;
|
|
height: 100%;
|
|
z-index: $s-z--background;
|
|
}
|
|
|
|
&__star {
|
|
position: absolute;
|
|
|
|
&-image {
|
|
width: 1.2em;
|
|
height: 1.2em;
|
|
transform: translate(-50%, -50%);
|
|
background: url('./../../../assets/icons/icon-star.svg');
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
|
|
animation: c-star-background--wobble $s-animation--time-very-long $s-animation--ease-in-out infinite;
|
|
}
|
|
|
|
//Styles
|
|
&.is-star-1 { left: 5%; top: 10%; transform: scale(0.5); }
|
|
&.is-star-2 { left: 10%; top: 50%; opacity: 0.5; }
|
|
&.is-star-3 { left: 20%; top: 25%; opacity: 0.9; transform: scale(0.75); }
|
|
&.is-star-4 { left: 35%; top: 35%; opacity: 0.7; }
|
|
&.is-star-5 { left: 45%; top: 5%; transform: scale(0.8); }
|
|
&.is-star-6 { left: 65%; top: 15%; transform: scale(0.5); }
|
|
&.is-star-7 { left: 75%; top: 30%; opacity: 0.75; transform: scale(0.75); }
|
|
&.is-star-8 { left: 85%; top: 10%; }
|
|
&.is-star-9 { left: 85%; top: 45%; opacity: 0.55; transform: scale(0.5); }
|
|
&.is-star-10 { left: 95%; top: 35%; opacity: 0.7; }
|
|
&.is-star-11 { left: 50%; top: 50%; }
|
|
&.is-star-12 { left: 45%; top: 40%; transform: scale(0.7); }
|
|
}
|
|
}
|