Add fire animation when hovering "hotlinks" title in index
This commit is contained in:
parent
e0b3e7a745
commit
09eb079cf9
3 changed files with 88 additions and 2 deletions
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"lastFetched": "2026-07-05T14:03:59.075Z",
|
||||
"lastFetched": "2026-07-05T14:19:39.422Z",
|
||||
"posts": [
|
||||
{
|
||||
"date": "2026-07-03T01:51:37.604Z",
|
||||
|
|
|
|||
|
|
@ -189,7 +189,7 @@ layout: base.njk
|
|||
|
||||
<div id="homeFriends">
|
||||
<div>
|
||||
<h1 class="nomargin negativeMargin">Hotlinks</h1>
|
||||
<h1 class="nomargin negativeMargin fireHover">Hotlinks</h1>
|
||||
<hr style="margin-bottom: .4em;">
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue