Effetto al passaggio del mouse - II

Lezione 31 di 31 del corso Card 3D | Progetto front-end di Coddy.

Questo codice definisce lo stile dei pulsanti social all'interno di un contenitore con la classe "social-buttons-container", che si trova dentro un elemento con la classe "bottom". Vediamolo nel dettaglio:

I primi tre blocchi di codice impostano le transizioni per i pulsanti social. Ogni pulsante ha un ritardo diverso prima dell'inizio della transizione. Le transizioni riguardano la proprietà "transform" (che probabilmente gestisce il movimento) e la proprietà "box-shadow" (che probabilmente controlla gli effetti ombra). Queste transizioni rendono fluidi nel tempo il movimento dei pulsanti e le modifiche alle ombre.
Il quarto blocco imposta la larghezza e il colore di riempimento delle icone SVG (Scalable Vector Graphics) all'interno dei pulsanti social.
Il quinto blocco definisce gli stili da applicare quando si passa il puntatore sopra un pulsante social. Cambia il colore di sfondo in nero e il cursore in un puntatore, indicando che è possibile fare clic sul pulsante.
L'ultimo blocco cambia in bianco il colore di riempimento dell'icona SVG quando si passa il puntatore sopra il pulsante social, fornendo un riscontro visivo all'utente.

Sfida

Facile

Usa questo codice:

.bottom .social-buttons-container .social-button:first-child {
  transition: transform 0.2s ease-in-out 0.4s, box-shadow 0.2s ease-in-out 0.4s;
}

.bottom .social-buttons-container .social-button:nth-child(2) {
  transition: transform 0.2s ease-in-out 0.6s, box-shadow 0.2s ease-in-out 0.6s;
}

.bottom .social-buttons-container .social-button:nth-child(3) {
  transition: transform 0.2s ease-in-out 0.8s, box-shadow 0.2s ease-in-out 0.8s;
}

.bottom .social-buttons-container .social-button .svg {
  width: 15px;
  fill: #008982;
}

.bottom .social-buttons-container .social-button:hover {
  background: black;
  cursor: pointer;
}

.bottom .social-buttons-container .social-button:hover .svg {
  fill: white;
}

.glass{
  border-top-right-radius: 100%;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);
  transform: translate3d(0px, 0px, 25px);
  transition: all 0.5s ease-in-out;
}

La tua scheda 3D è pronta!

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Scrivi qui il codice HTML -->
        <script src="script.js"></script>
    </body>
</html>

Tutte le lezioni di Card 3D | Progetto front-end

Esercitati da solo: Playground Web