Efekt najechania kursorem - II

Lekcja 31 z 31 w kursie Karta 3D | Projekt front-endowy w Coddy.

Ten kod stylizuje przyciski mediów społecznościowych wewnątrz kontenera z klasą "social-buttons-container", który znajduje się w elemencie z klasą "bottom". Omówmy to krok po kroku:

Pierwsze trzy bloki kodu konfigurują przejścia dla przycisków mediów społecznościowych. Każdy przycisk ma inne opóźnienie przed rozpoczęciem przejścia. Przejścia dotyczą właściwości "transform" (która prawdopodobnie odpowiada za ruch) oraz właściwości "box-shadow" (która prawdopodobnie kontroluje efekty cienia). Dzięki tym przejściom ruch przycisków i zmiany cienia przebiegają płynnie w czasie.
Czwarty blok ustawia szerokość i kolor wypełnienia ikon SVG (Scalable Vector Graphics) wewnątrz przycisków mediów społecznościowych.
Piąty blok konfiguruje style stosowane po najechaniu kursorem na przycisk mediów społecznościowych. Zmienia kolor tła na czarny i ustawia kursor w kształcie wskaźnika, informując, że przycisk można kliknąć.
Ostatni blok zmienia kolor wypełnienia ikony SVG na biały po najechaniu kursorem na przycisk mediów społecznościowych, zapewniając użytkownikowi wizualną informację zwrotną.

Wyzwanie

Łatwy

Użyj tego kodu:

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

Twoja karta 3D jest gotowa!

Spróbuj swoich sił

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Wpisz tutaj kod HTML -->
        <script src="script.js"></script>
    </body>
</html>

Wszystkie lekcje w sekcji Karta 3D | Projekt front-endowy

Poćwicz samodzielnie: Edytor online Web