fberger/brabetz-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add shifting rainbow gradient animation to rain page title

Browse Source
This commit is contained in:
Felix Brabetz
2026-05-16 06:52:26 +02:00
parent d5d7645b47
commit 802261982c
1 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SubpageRain.astro
+15 -1
View File
@@ -144,9 +144,23 @@ window.rainData = function() {
<div class="border-b border-stone-800 pb-6"> <div class="border-b border-stone-800 pb-6">
<span class="text-xs text-emerald-500 font-mono uppercase tracking-widest block mb-2">Atmosphäre & Ökologie</span> <span class="text-xs text-emerald-500 font-mono uppercase tracking-widest block mb-2">Atmosphäre & Ökologie</span>
<h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Regen für Gemütlichkeit</h1> <h1 class="text-4xl sm:text-5xl font-luxury font-bold rainbow-text">Regen für Gemütlichkeit</h1>
</div> </div>
<style>
.rainbow-text {
background: linear-gradient(to right, #ff2a2a, #ff7e2a, #ffea2a, #2aff2a, #2a7eff, #8a2be2, #ff2a2a);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rainbow 4s linear infinite;
}
@keyframes rainbow {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
</style>
<!-- Controls (Togglebar) --> <!-- Controls (Togglebar) -->
<div class="glass p-8 rounded-2xl border border-stone-800"> <div class="glass p-8 rounded-2xl border border-stone-800">
<div class="flex justify-between items-center cursor-pointer select-none" @click="rainOpen = !rainOpen"> <div class="flex justify-between items-center cursor-pointer select-none" @click="rainOpen = !rainOpen">