Animationer på text-styles

Den første er ‘free of charge’… Farverne er sat op som variabler i CSS, så implementer gerne dine farver som variabler ved at klikke her.

				
					<font class="gradient-scroll-left">Animationer</font> på text-styles

				
					.gradient-scroll-left {
  background: linear-gradient(
    90deg,
    var(--cta),
    #000000,
    var(--cta) 
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: scrollLeft 12s linear infinite;
}

@keyframes scrollLeft {
  from {
    background-position: 300% 50%;   /* starter længere til højre */
  }
  to {
    background-position: 0% 50%;     /* glider mod venstre */
  }
}

Hvad med den her?

Kunne dette være noget?

				
					Hvad med den her<font class="font-spin-3d">?</font>

				
					.font-spin-3d {
    display: inline-block;
    animation: spin3d 6s linear infinite;
    transform-style: preserve-3d;
    color: var(--cta);
}

@keyframes spin3d {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

Eller der er også denne

Kunne dette være noget?

				
					Eller der er også <font class="crazy-fluid-text">denne</font>

				
					.crazy-fluid-text {
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--primaer),
    var(--cta),
    var(--sekundaer),
    var(--primaer),
    var(--cta)
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
          background-clip: text;
  text-shadow: 
    0 0 15px var(--primaer),
    0 0 35px var(--cta),
    0 0 60px color-mix(in srgb, var(--sekundaer) 60%, transparent);
  position: relative;
  display: inline-block;
  filter: drop-shadow(0 0 25px color-mix(in srgb, var(--primaer) 40%, black));
  animation: 
    flow-gradient 14s ease-in-out infinite,
    subtle-breathe 5.5s ease-in-out infinite alternate;
}

@keyframes flow-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes subtle-breathe {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.03) translateY(-4px); }
}

@keyframes liquid-wobble {
  0%, 100%   { transform: translateY(0)   rotateX(0deg)  skew(0deg); }
  25%        { transform: translateY(-10px) rotateX(4deg) skew(2deg); }
  50%        { transform: translateY(6px)   rotateX(-3deg) skew(-4deg); }
  75%        { transform: translateY(-8px) rotateX(2deg) skew(1deg); }
}

@keyframes color-shift {
  0%, 100% { filter: brightness(1) saturate(1.1); }
  50%      { filter: brightness(1.3) saturate(1.6) hue-rotate(15deg); }
}

onkel simse

Kunne dette være noget?

				
					<span>onkel simse</span>
<!-- classen liquid-glass er slået til under avanceret -->

				
					:root {
  --glass-bg: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.18);
}

.liquid-glass {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6em 1.4em;
  border-radius: 9999px;
  background: var(--glass-bg);
  border: 1.5px solid var(--glass-border);
  box-shadow: 
    0 10px 40px rgba(0,0,0,0.4),
    inset 0 0 25px rgba(255,255,255,0.09);
  
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  
  overflow: clip;
  isolation: isolate;
  will-change: transform;
  transition: transform 0.35s ease;
}

.liquid-glass:hover {
  transform: scale(1.035);
}

/* Shine lag – baggrunds-position animation (meget mere stabil på mobil) */
.liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    transparent 25%,
    rgba(255,255,255,0.32) 40%,
    rgba(255,255,255,0.10) 60%,
    transparent 75%
  );
  background-size: 300% 300%;
  mix-blend-mode: screen;
  opacity: 0.85;
  animation: shine-move 16s ease-in-out infinite;
  pointer-events: none;
}

/* Blød radial glød / caustic effekt */
.liquid-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse at 35% 25%,
    rgba(192, 132, 252, 0.38) 0%,
    transparent 65%
  );
  mix-blend-mode: screen;
  opacity: 0.65;
  filter: blur(16px);
  animation: glow-drift 22s ease-in-out infinite;
  pointer-events: none;
}

/* Tekst gradient + animation */
.liquid-glass span {
  position: relative;
  z-index: 2;
  background: linear-gradient(90deg, var(--cta), var(--primaer), var(--primaer), var(--cta));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-flow 9s linear infinite;
  text-shadow: 0 3px 16px rgba(0,0,0,0.55);
}

/* Keyframes */
@keyframes shine-move {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 100%; }
}

@keyframes glow-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(8%, 6%) scale(1.08); }
}

@keyframes gradient-flow {
  to { background-position: 300% center; }
}

/* ────────────────────────────────────────
   Mobil – lettere animation, ingen risikable tricks
───────────────────────────────────────── */
@media (max-width: 767px) {
  .liquid-glass {
    padding: 0.55em 1.3em;
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
  }

  .liquid-glass::before {
    opacity: 0.75;
    animation-duration: 20s; /* lidt langsommere = mindre chance for glitch */
  }

  .liquid-glass::after {
    opacity: 0.6;
    filter: blur(14px);
    animation-duration: 26s;
  }

  .liquid-glass:hover {
    transform: scale(1.02); /* mindre scale på touch-enheder */
  }
}

/* Safari / iOS hardware acceleration + bedre klipning */
@supports (-webkit-backdrop-filter: none) {
  .liquid-glass,
  .liquid-glass::before,
  .liquid-glass::after {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}