tenkuma/web
tenkuma/web
Watch
1
0
Fork
You've already forked web
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add fire animation when hovering "hotlinks" title in index

Browse source
This commit is contained in:
天クマ 2026-07-05 11:20:12 -03:00
commit 09eb079cf9
3 changed files with 88 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

86
static/main.css
View file

@ -1130,6 +1130,20 @@ header div:first-child {
border-top: none;
}
.fire, .fireHover:hover {
animation: fire-animation 1s ease-in-out infinite alternate;
-moz-animation: fire-animation 1s ease-in-out infinite alternate;
-webkit-animation: fire-animation 1s ease-in-out infinite alternate;
-o-animation: fire-animation 1s ease-in-out infinite alternate;
}
.burn {
animation: fire-animation .65s ease-in-out infinite alternate;
-moz-animation: fire-animation .65s ease-in-out infinite alternate;
-webkit-animation: fire-animation .65s ease-in-out infinite alternate;
-o-animation: fire-animation .65s ease-in-out infinite alternate;
}
/* Animations */
@keyframes ellipsis-loader {
@ -1163,6 +1177,78 @@ header div:first-child {
to { opacity: 0; }
}
@keyframes fire-animation
{
0% {text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
-20px -60px 60px #cd4606,
0 -80px 70px #973716,
10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #fefcc9,
-20px -20px 40px #feec85,
22px -42px 60px #ffae34,
-22px -58px 50px #ec760c,
0 -82px 80px #cd4606,
10px -90px 80px #973716;}
}
@-moz-keyframes fire-animation
{
0% {text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
-20px -60px 60px #cd4606,
0 -80px 70px #973716,
10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #fefcc9,
-20px -20px 40px #feec85,
22px -42px 60px #ffae34,
-22px -58px 50px #ec760c,
0 -82px 80px #cd4606,
10px -90px 80px #973716;}
}
@-webkit-keyframes fire-animation
{
0% {text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
-20px -60px 60px #cd4606,
0 -80px 70px #973716,
10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #fefcc9,
-20px -20px 40px #feec85,
22px -42px 60px #ffae34,
-22px -58px 50px #ec760c,
0 -82px 80px #cd4606,
10px -90px 80px #973716;}
}
@-o-keyframes fire-animation
{
0% {text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
-20px -60px 60px #cd4606,
0 -80px 70px #973716,
10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #fefcc9,
-20px -20px 40px #feec85,
22px -42px 60px #ffae34,
-22px -58px 50px #ec760c,
0 -82px 80px #cd4606,
10px -90px 80px #973716;}
}
/* Media queries */
@media screen and (max-width: 1400px) {