Hover-Effekt - II

Lektion 31 von 31 im Kurs 3D-Karte | Front-end-Projekt von Coddy.

Dieser Code gestaltet Social-Buttons innerhalb eines Containers mit der Klasse "social-buttons-container", der sich in einem Element mit der Klasse "bottom" befindet. Lassen Sie mich das aufschlüsseln:

Die ersten drei Codeblöcke richten Übergänge für die Social-Buttons ein. Jeder Button hat eine andere Verzögerung, bevor der Übergang beginnt. Die Übergänge gelten für die Eigenschaft "transform" (die wahrscheinlich die Bewegung steuert) und die Eigenschaft "box-shadow" (die wahrscheinlich Schatteneffekte steuert). Diese Übergänge sorgen dafür, dass die Button-Bewegung und die Schattenänderungen im Laufe der Zeit flüssig erfolgen.
Der vierte Block legt die Breite und die Füllfarbe für die SVG-Icons (Scalable Vector Graphics) innerhalb der Social-Buttons fest.
Der fünfte Block legt Stile für den Fall fest, dass ein Social-Button mit der Maus berührt wird (Hover-Zustand). Er ändert die Hintergrundfarbe in Schwarz und ändert den Cursor in einen Zeiger, was signalisiert, dass der Button anklickbar ist.
Der letzte Block ändert die Füllfarbe des SVG-Icons in Weiß, wenn der Social-Button mit der Maus berührt wird, was dem Benutzer ein visuelles Feedback gibt.

Aufgabe

Einfach

Verwende diesen Code:

.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;
}

Deine 3D-Karte ist fertig!

Probier es selbst

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

Hover-Effekt - II

Alle Lektionen in 3D-Karte | Front-end-Projekt