CSS3: effetto dissolvenza al passaggio del mouse

Ecco un esempio di codice CSS3 che utilizza la transizione per creare un effetto di dissolvenza al passaggio del mouse di colori casuali:

.element {
  width: 100px;
  height: 100px;
  background-color: #f00;
  transition: all 2s ease-in-out;
}

.element:hover {
  background-color: #0f0;
  animation: fadeColor 5s infinite;
}

@keyframes fadeColor {
  0% {
    background-color: #f00;
  }
  25% {
    background-color: #0f0;
  }
  50% {
    background-color: #00f;
  }
  75% {
    background-color: #ff0;
  }
  100% {
    background-color: #f00;
  }
}

In questo codice, l’elemento con classe “element” inizialmente ha un colore di sfondo rosso. Quando l’utente passa sopra l’elemento con il mouse, il colore di sfondo diventa verde. L’effetto di dissolvenza è creato utilizzando la transizione “all 2s ease-in-out” e l’animazione “fadeColor 5s infinite“. La transizione modifica gradualmente il colore di sfondo da rosso a verde quando l’utente passa sopra l’elemento, mentre l’animazione “fadeColor” utilizza la sintassi @keyframes per creare un effetto di dissolvenza di colori casuali che ciclano tra rosso, verde, blu e giallo.