Template:Text Shuffle/styles.css: Difference between revisions
Template page
More actions
Content deleted Content added
No edit summary Tag: Reverted |
Tesinormed (talk | contribs) No edit summary |
||
| (41 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
/* |
/* turned into slop atp */ |
||
.TextShuffler { |
.TextShuffler { |
||
position: relative; |
|||
visibility: hidden; |
|||
font-size: 2rem; |
|||
color: #ffffff; |
|||
letter-spacing: 2px; |
|||
margin-block: var(--space-md); |
|||
width: 10ch; |
|||
height: 2.5em; |
|||
display: flex; |
|||
display: inline; |
|||
} |
} |
||
.TextShuffler |
.TextShuffler > div { |
||
position: absolute; |
|||
top: 0; |
|||
visibility: visible; |
|||
left: 0; |
|||
top: 0; |
|||
font-size: var(--font-size-large); |
|||
| ⚫ | |||
opacity: 0; |
|||
| ⚫ | |||
transition: opacity 0.7s ease-in-out; |
|||
text-shadow: 0 0 5px; |
|||
pointer-events: none; |
|||
} |
} |
||
.TextShuffler |
.TextShuffler > :nth-child(1) { animation-delay: 0s; } |
||
.TextShuffler |
.TextShuffler > :nth-child(2) { animation-delay: 8s; } |
||
.TextShuffler |
.TextShuffler > :nth-child(3) { animation-delay: 16s; } |
||
.TextShuffler |
.TextShuffler > :nth-child(4) { animation-delay: 24s; } |
||
.TextShuffler |
.TextShuffler > :nth-child(5) { animation-delay: 32s; } |
||
.TextShuffler |
.TextShuffler > :nth-child(6) { animation-delay: 40s; } |
||
.TextShuffler |
.TextShuffler > :nth-child(7) { animation-delay: 48s; } |
||
.TextShuffler .word:nth-child(8) { animation-delay: 7s; } |
|||
.TextShuffler .word:nth-child(9) { animation-delay: 8s; } |
|||
.TextShuffler .word:nth-child(10) { animation-delay: 9s; } |
|||
@keyframes |
@keyframes fadeCycle { |
||
0% { opacity: 0; } |
|||
2% { opacity: 1; } |
|||
8% { opacity: 1; } |
|||
10% { opacity: 0; } |
|||
100% { opacity: 0; } |
|||
} |
} |
||
Latest revision as of 02:20, May 3, 2025
/* turned into slop atp */
.TextShuffler {
position: relative;
visibility: hidden;
color: #ffffff;
margin-block: var(--space-md);
}
.TextShuffler > div {
position: absolute;
visibility: visible;
top: 0;
font-size: var(--font-size-large);
opacity: 0;
animation: fadeCycle 56s linear infinite;
transition: opacity 0.7s ease-in-out;
text-shadow: 0 0 5px;
pointer-events: none;
}
.TextShuffler > :nth-child(1) { animation-delay: 0s; }
.TextShuffler > :nth-child(2) { animation-delay: 8s; }
.TextShuffler > :nth-child(3) { animation-delay: 16s; }
.TextShuffler > :nth-child(4) { animation-delay: 24s; }
.TextShuffler > :nth-child(5) { animation-delay: 32s; }
.TextShuffler > :nth-child(6) { animation-delay: 40s; }
.TextShuffler > :nth-child(7) { animation-delay: 48s; }
@keyframes fadeCycle {
0% { opacity: 0; }
2% { opacity: 1; }
8% { opacity: 1; }
10% { opacity: 0; }
100% { opacity: 0; }
}