CSS-liukuvärin hover-efekti: neljä animointitapaa

CSS-liukuvärin hover-efekti tarvitsee kiertotavan, koska selaimet eivät tee background-image-siirtymiä. :hover-tilassa muutettu liukuväri vaihtuu kerralla. Neljä tapaa tuottaa pehmeän tuloksen: liu’uta ylikokoista liukuväriä background-position-ominaisuudella, animoi rekisteröityjä väripisteitä @property-säännöllä, ristihäivytä pseudo-elementin toinen liukuväri tai liikuta säteittäistä hohdetta osoittimen mukana. Eri tavat sopivat eri elementteihin. Kaikki löytyvät alta koodeineen.

Miksi transition ei toimi liukuväreillä

Selaimelle liukuväri on kuva. Se osaa interpoloida luvun tai värin, muttei kuvaa toiseksi. Siksi background-image ei interpoloidu, vaan uusi liukuväri korvaa vanhan heti. Liukuvärissä käytetyt mukautetut ominaisuudet toimivat samoin, ellet rekisteröi niitä. Rekisteröimätön ominaisuus on pelkkää tekstiä.

/* This snaps, with no easing */
.btn {
  background-image: linear-gradient(135deg, #1e1b4b, #6d28d9);
  transition: background-image 400ms ease;
}
.btn:hover {
  background-image: linear-gradient(135deg, #6d28d9, #f472b6);
}

Tapa 1: liu’uta ylikokoista liukuväriä

Tee taustasta elementtiä suurempi ja maalaa siihen molemmat tilat. Liikuta sitten taustaa. background-position tukee siirtymiä, joten uudet värit liukuvat näkyviin. Tapa toimii kaikissa selaimissa eikä tarvitse rekisteröintiä.

.btn {
  background-image: linear-gradient(90deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position 500ms ease;
}

.btn:hover {
  background-position: 100% 50%;
}

Liike näyttää pyyhkäisyltä, mikä sopii painikkeisiin ja linkkeihin. Suurissa korteissa se ei vakuuta yhtä hyvin, koska liukuvärin liikkumisen huomaa. background-position-animointi vaatii uudelleenmaalausta, mikä sopii pieniin elementteihin. Suurille pinnoille käytä tapaa 3. CSS-liukuväripainikkeissa on lisää tähän perustuvia malleja.

Tapa 2: animoi väripisteitä @property-säännöllä

Rekisteröi väripisteet tyypitetyiksi mukautetuiksi ominaisuuksiksi, niin selain voi interpoloida niitä. Liukuväri vaihtaa väriä paikallaan liukumatta. @property toimii kaikissa nykyisissä valtavirran selaimissa. Vanhoissa tilat vaihtuvat kerralla, mikä on hover-efektille hyväksyttävä vararatkaisu. Rekisteröintisäännöt käsitellään CSS:n @property-oppaassa.

@property --stop-a {
  syntax: "<color>";
  inherits: false;
  initial-value: #1e1b4b;
}

@property --stop-b {
  syntax: "<color>";
  inherits: false;
  initial-value: #6d28d9;
}

.card {
  background-image: linear-gradient(135deg, var(--stop-a), var(--stop-b));
  transition: --stop-a 450ms ease, --stop-b 450ms ease;
}

.card:hover {
  --stop-a: #6d28d9;
  --stop-b: #f472b6;
}

Sama keino animoi kulmaa. Rekisteröi --angle asetuksella syntax: "<angle>", käytä sitä muodossa linear-gradient(var(--angle), ...) ja muuta sitä hover-tilassa. Osoittimen saapuessa 135 asteesta 225 asteeseen kääntyvä liukuväri on hienovarainen viimeistely korteissa ja liukuvärireunuksissa.

Molemmat tähänastiset tavat toimivat myös liukuväritekstissä. background-clip: text rajaa taustan kirjaimiin, joten otsikon taustan liuku tai väripisteiden siirtymä kuljettaa väriä kirjainten läpi hover-tilassa. Pidä luettavien otsikoiden muutos hillittynä ja varmista molempien tilojen kontrasti sivun taustaan.

Tapa 3: ristihäivytä kaksi liukuväriä

Aseta hover-liukuväri pseudo-elementtiin pohjan yläpuolelle ja häivytä sen peittävyyttä. Koostaja käsittelee peittävyyden muutokset ilman uudelleenmaalausta. Tämä on sujuvin valinta suuriin kortteihin, pääosioihin ja pitkiin ruudukkoihin.

.tile {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(135deg, #1e1b4b, #6d28d9);
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: linear-gradient(135deg, #6d28d9, #f472b6);
  opacity: 0;
  transition: opacity 400ms ease;
}

.tile:hover::before {
  opacity: 1;
}

Tapa 4: osoitinta seuraava hohde

Mukautetuilla ominaisuuksilla sijoitettu säteittäinen liukuväri voi seurata osoitinta. Aseta --x ja --y pienellä skriptillä, niin valo liikkuu käden mukana. Pidä se pehmeänä ja poissa tekstistä. Sen pitäisi näyttää pinnan valolta, ei sanoja ympäröivältä sädekehältä.

.panel {
  background-image:
    radial-gradient(circle 220px at var(--x, 50%) var(--y, 50%), rgb(244 114 182 / 0.35), transparent 70%),
    linear-gradient(135deg, #1e1b4b, #312e81);
}

/* JavaScript:
   panel.addEventListener("pointermove", (e) => {
     const r = panel.getBoundingClientRect();
     panel.style.setProperty("--x", `${e.clientX - r.left}px`);
     panel.style.setProperty("--y", `${e.clientY - r.top}px`);
   });
*/

Sopivan tavan valinta

Itsestään liikkuvia liukuvärejä käsitellään animoiduissa CSS-liukuväreissä. Laajempi katsaus maalausaikaan löytyy CSS-liukuvärien suorituskyvystä.

Kosketusnäytöt ja vähennetty liike

@media (hover: hover) {
  .btn:hover { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

Hover-efektit elävöittävät verkkosivua. Somejulkaisuissa ei ole osoitinta, joten liikkeen täytyy kuulua itse suunnitelmaan. Gradientlyn Markit voivat liikkua lempeästi, ja Prolla viet suunnitelman MP4-, WebM- tai GIF-muodossa selaimen tukiessa tallennusta, valmiina tarinaan tai julkaisuun.