32 lines
1011 B
SCSS
32 lines
1011 B
SCSS
%fire-trophy-shadow {
|
|
text-shadow: 0 0.008em 0.127em #fefcc9, 0.055em -0.066em 0.2em #feec85, -0.111em -0.127em 0.272em #ffae34,
|
|
0.111em -0.272em 0.411em #ec760c, -0.111em -0.456em 0.416em #cd4606, 0 -0.533em 0.577em #973716,
|
|
0.055em -0.55em 0.533em #451b0e;
|
|
}
|
|
|
|
@keyframes fire-trophy {
|
|
0% {
|
|
text-shadow: 0 0.008em 0.127em #fefcc9, 0.055em -0.066em 0.2em #feec85, -0.111em -0.127em 0.272em #ffae34,
|
|
0.111em -0.272em 0.411em #ec760c, -0.111em -0.456em 0.416em #cd4606, 0 -0.533em 0.577em #973716,
|
|
0.055em -0.55em 0.533em #451b0e;
|
|
}
|
|
|
|
100% {
|
|
text-shadow: 0 0 0.111em #fefcc9, 0.055em -0.055em 0.166em #fefcc9, -0.111em -0.111em 0.222em #feec85,
|
|
0.122em -0.233em 0.333em #ffae34, -0.122em -0.322em 0.277em #ec760c, 0 -0.456em 0.444em #cd4606,
|
|
0.055em -0.5em 0.444em #973716;
|
|
}
|
|
}
|
|
|
|
.fire-trophy {
|
|
@extend %fire-trophy-shadow;
|
|
|
|
color: $c-font;
|
|
font-size: 90px;
|
|
display: block;
|
|
|
|
&:hover {
|
|
animation: fire-trophy 1.5s ease-in-out infinite alternate;
|
|
}
|
|
}
|