Jak dodać subtelne animacje i przejścia do elementów witryny za pomocą CSS?
Wersja audio:
W dzisiejszym cyfrowym krajobrazie stworzenie angażującej i atrakcyjnej wizualnie strony internetowej ma kluczowe znaczenie dla przyciągnięcia i utrzymania uwagi odbiorców. Jednym ze skutecznych sposobów na to jest włączenie subtelnych animacji i przejść do elementów internetowych za pomocą kaskadowych arkuszy stylów (CSS). Animacje te mogą tchnąć życie w witrynę, czyniąc ją bardziej interaktywną i przyjazną dla użytkownika. W tym artykule zbadamy, jak dodać te animacje i przejścia do zestawu narzędzi do projektowania stron internetowych.
Spis treści
Rozpoczęcie od utworzenia strony HTML
Zanim zagłębimy się w szczegóły, skonfigurujmy podstawową strukturę HTML dla naszej demonstracji. Utwórz plik HTML o nazwie index.html i dodaj następujący kod.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Subtle Animations and Transitions</title>
</head>
<body>
<div class="container">
<button class="btn">Hover Me</button>
</div>
</body>
</html>
Teraz, aby zobaczyć stronę internetową, otwórz plik HTML w dowolnej przeglądarce internetowej.
W tym przykładzie mamy prostą strukturę HTML z kontenerem i przyciskiem. Zastosujemy animacje i przejścia do elementu przycisku za pomocą CSS.
Tworzenie podstawowej animacji
Zacznijmy od stworzenia podstawowej animacji CSS dla naszego przycisku. Utwórz plik styles.css w tym samym katalogu co plik HTML i dodaj następujący kod. Każda linia w kodzie została wyjaśniona komentarzami, które pomogą ci zrozumieć CSS.
/* styles.css */
/* This selector targets elements with a class of "btn" */
.btn {
/* Background color for the button */
background-color: #7434db;
/* Text color inside the button */
color: #fff;
/* Padding inside the button (10px top/bottom, 20px left/right) */
padding: 10px 20px;
/* Remove the button border */
border: none;
/* Change the cursor to a pointer on hover, indicating it's clickable */
cursor: pointer;
/* Rounded corners for the button */
border-radius: 5px;
/* Set the button's width to 70% of its container's width */
width: 70%;
/* Add left margin, pushing the button slightly to the right */
margin-left: 15%;
/* Set the button's height to 40 pixels */
height: 40px;
/* Apply the "pulse" animation to the button with a 2-second duration,
and repeat it infinitely */
animation: pulse 2s infinite;
}
/* Define a keyframes animation named "pulse" */
@keyframes pulse {
/* At 0% of the animation, the element has its normal scale (1x) */
0% {
transform: scale(1);
}
/* At 50% of the animation, the element is scaled up to 1.1x its normal size */
50% {
transform: scale(1.1);
}
/* At 100% of the animation, the element returns to its normal scale (1x) */
100% {
transform: scale(1);
}
}
W tym kodzie definiujemy animację CSS o nazwie pulse, która skaluje element przycisku w górę i w dół w sposób ciągły. Reguła @keyframes określa klatki kluczowe animacji (początek, środek i koniec), a my stosujemy tę animację do klasy .btn. Otwórz stronę ponownie w dowolnej przeglądarce internetowej, a zobaczysz prostą animację:
Przyciski pojawiają się i znikają powoli, co sprawia, że wygląda to profesjonalnie. Spróbujmy zrozumieć, jak to właściwie działa:
- Reguła @keyframes definiuje klatki kluczowe animacji, gdzie 0% reprezentuje punkt początkowy, 50% to punkt środkowy, a 100% to punkt końcowy.
- Wewnątrz animacji pulsu używamy właściwości transform do skalowania przycisku. Przy 0% przycisk ma normalny rozmiar (scale( 1)), przy 50% jest nieco większy (scale(1.1)), a przy 100% powraca do normalnego rozmiaru.
- Ustawiamy animację tak, aby działała w nieskończoność, używając infinite we właściwości animacji.
Dodawanie przejść dla efektów najechania kursorem
Przejścia CSS pozwalają na płynne zmiany wartości właściwości w określonym czasie. Dodajmy efekt najechania kursorem do naszego przycisku za pomocą przejść. Zaktualizuj plik styles.css za pomocą następującego kodu:
/* styles.css */
.btn {
/* ... (previous styles) */
background-color: #3498db;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 5px;
animation: pulse 2s infinite;
transition: background-color 0.6s, transform 0.4s;
}
.btn:hover {
background-color: #29b94d;
transform: scale(1.05);
}
Tutaj dodajemy właściwość przejścia do klasy .btn, określając, że chcemy zmienić kolor tła i właściwości transformacji w czasie 0,6 s. Po najechaniu na przycisk (:hover) zmieniamy kolor tła i lekko skalujemy przycisk, aby uzyskać efekt płynnego przejścia.
Wnioski
Dodanie subtelnych animacji i przejść do elementów witryny może poprawić ogólne wrażenia użytkownika i sprawić, że witryna będzie bardziej angażująca. W tym artykule omówiliśmy podstawy animacji i przejść CSS, tworząc prostą animację pulsującą i efekt najechania kursorem dla elementu przycisku.