Większość nowoczesnych stron internetowych korzysta z kaskadowych arkuszy stylów (CSS). Niektóre witryny korzystają z podstawowych funkcji CSS, podczas gdy inne korzystają z zaawansowanych funkcji, aby ich aplikacje internetowe były bardziej atrakcyjne.
Dodanie przyciągających wzrok efektów może poprawić współczynnik klikalności w Twojej witrynie, sprowokować użytkowników do działania, a nawet wydłużyć czas, jaki użytkownicy spędzają w Twojej witrynie.
W tym artykule omówimy, czym są efekty najechania kursorem CSS, w jaki sposób mogą sprawić, że Twoja witryna przyciąga wzrok, jak możesz zaimplementować te efekty, a także podamy przykłady stron internetowych, które implementują klasyczne efekty CSS najechania kursorem.
Spis treści:
Co to jest efekt najechania CSS?
Efekt najechania CSS pojawia się, gdy użytkownik witryny najeżdża kursorem (wskaźnikiem myszy) na element. Rezultatem może być zmiana koloru, tekstu lub innych animowanych efektów. Takie efekty są dodawane do strony internetowej w celu zwiększenia interaktywności i ułatwienia nawigacji.
Efekty najechania kursorem CSS mogą pojawiać się jako przejścia lub animacje.
Przejścia
Takie efekty pozwalają na zmianę wyglądu lub zachowania elementu na stronie internetowej. Musi jednak istnieć wyzwalacz, na przykład najechanie kursorem myszy na określony element. Przejścia przechodzą od stanu początkowego do stanu końcowego po wyzwoleniu. Przejście przebiega tylko raz i nie pozwala na określenie punktów pośrednich.
animacje
Te efekty mają klatki kluczowe, które pozwalają im powtarzać wstecz, zapętlać i przechodzić od stanu początkowego do końcowego. Efekty te mają również stan pośredni. Klatka kluczowa wskazuje sposób renderowania animowanych elementów w danym momencie sekwencji animacji.
Rodzaje efektów najechania kursorem CSS
Efekty CSS najechania kursorem można zastosować do tekstu, obrazów, filmów, linków lub przycisków. Oto niektóre z głównych aplikacji:
# 1. Efekty najechania kursorem na tekst
Takie efekty są odpowiednie, gdy chcesz zbudować minimalistyczną stronę internetową. Projekt powinien być prosty, ale nadal przekazywać wiadomość. Może występować w następujących formach:
- Efekt tekstowy terminala: Ten efekt naśladuje pisanie na procesorze tekstu. Słowa będą migać, ale prędkość powinna być wystarczająca, aby użytkownicy mogli je przeczytać.
- Animacja tekstu: Tekst w tym efekcie może przesuwać się w górę, w dół lub na boki.
#2. Efekty najechania na link
Typowa strona internetowa będzie miała różne hiperłącza, które przekierowują użytkowników do różnych stron. Takich linków jest coraz więcej w miarę rozwoju witryny. Efekty najechania na link mogą przybierać następujące formy;
- Zmiana koloru łącza: Kolor łącza z niebieskiego na czerwony.
- Zmiana koloru tła: Ten efekt zmienia kolor tła łącza.
- Zamiana tekstu: Ten efekt zmienia zawartość ikony łącza.
#3. Efekty najechania na przycisk
Przyciski są ważne na stronach internetowych, ponieważ pozwalają nam przesyłać formularze i uzyskiwać dostęp do różnych sekcji strony internetowej. Efekty najechania na przyciski można zaimplementować w postaci:
- Zmiana koloru tekstu: Kolor tekstu na przycisku z napisem „Kliknij mnie” może zmienić się z czerwonego na zielony po najechaniu myszką.
- Zmiana koloru tła: przyciski HTML są domyślnie przezroczyste. Deweloperzy mogą dodać kolor tła do takich przycisków. Po najechaniu kursorem kolor tła może zmienić się z brązowego na zielony.
- Efekt odbicia: możesz dodać użytkownikowi atrakcyjności wizualnej, projektując przycisk tak, aby odbijał się po najechaniu myszką.
#4. Efekty najechania na obraz
- Zamień obrazy: możesz utworzyć karuzelę obrazów, które zamieniają się po najechaniu myszką.
- Pojawianie się/zanikanie obrazów: Ten efekt sprawia, że obrazy stają się wyraźniejsze po najechaniu na nie kursorem.
Zamiana testowa: bardzo często można znaleźć strony internetowe, które ukrywają różne opisy na swoich obrazach. Na przykład witryna turystyczna może wyświetlać szczegóły hotelu po najechaniu kursorem przez użytkownika.
Teraz możemy wyjaśnić kilka klasycznych efektów najechania kursorem CSS dla Twojej witryny.
Zmień kolor tła po najechaniu myszką
Efekt ten można zastosować do przycisków, łączy lub tekstu wyświetlanego na stronie internetowej. Gdy kursor myszy dotknie celu, kolor tła się zmieni.
Możesz zmienić tło swojego tekstu w tych krokach;
- Użyj pseudoklasy:hover, aby osiągnąć swoje cele
- Utwórz element, taki jak div, przycisk lub link, w którym zaimplementujesz efekt najechania kursorem.
To jest przykładowy kod implementujący te efekty.
Plik HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> <div> Hover and see me change!!!!! </div </body> </html>
plik CSS
div:hover {
background-color: rgb(255, 0, 0);
width: 18rem;
align-items: center;
text-align: center;
}
Przed najechaniem kursorem nastąpi;
Po najechaniu kursorem wynik będzie następujący;
Zmień kolor łącza po najechaniu myszką
Linki to ważne elementy na stronie internetowej, ponieważ pomagają nam przechodzić z jednej strony na drugą. Do tworzenia hiperłączy używamy znaczników HTML . Zmiana koloru linku po najechaniu kursorem zwiększa widoczność linków.
Aby zademonstrować ten efekt, potrzebujemy:
- Utwórz tag selektora na tagu :head lub :body
- Zdefiniuj pseudoklasę :hover
Możesz użyć tego przykładowego kodu, aby wyświetlić link, który zmienia kolor z zielonego na pomarańczowy po najechaniu myszką.
plik HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> <div> <a href="#">Hover over me and see the magic</a> </div </body> </html>
plik CSS:
a:link {
color: rgb(0, 255, 34);
}
a:hover {
color: #ff8400;
}
Dane wyjściowe przed najechaniem;
Wyjście po efekcie zawisu;
Przesuwanie podświetlenia po najechaniu kursorem
Gdy użytkownik najedzie kursorem, ten efekt doda cień ramki do linku wbudowanego. Kolor linku zostanie zmieniony w trakcie. Aby to osiągnąć, możesz wykonać następujące kroki jako przewodnik;
- Dodaj dopełnienie wokół łącza (może zadziałać coś w rodzaju 0,25 rem)
- Dodaj margines o podobnej wartości. Zapobiega to zakłócaniu przepływu tekstu przez wypełnienie.
Możesz mieć to jako prosty plik HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <a href="#">newsblog.pl</a> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> </body> </html>
To może być twój plik CSS;
a {
box-shadow: inset 0 0 0 0 rgb(255, 21, 0);
color: #ff4000;
padding: 0 .25rem;
margin: 0 -.25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
color: #fff;
box-shadow: inset 200px 0 0 0 #ff4000;;
}
a {
color: #ff4000;
font-family: 'Poppins', sans-serif;
font-size: 27px;
font-weight: 700;
line-height: 1.5;
text-decoration: none;
}
body {
display: grid;
}
Przed efektem zawisu;
Po efekcie zawisu;
Tęczowe podkreślenie po najechaniu myszką
Ten efekt dodaje wielokolorowe podkreślenie tekstu po najechaniu kursorem.
- Użyj: pseudoklasy z liniowym gradientem, aby stworzyć płynne przejście między różnymi kolorami.
- Użyj pseudoklasy :hover, aby osiągnąć swoje cele.
- Utwórz element linku, w którym zaimplementujesz efekt najechania kursorem.
To jest przykładowy kod implementujący tęczowe podkreślenie po najechaniu kursorem:
plik HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> <div> <p>This is <a href="#">Rainbow</a> hover effect. </p> </div </body> </html>
plik CSS:
p {
max-width: 800px;
margin: auto 15%;
line-height: 1.1;
font-size: 78px;
font-weight: 700;
letter-spacing: .0125em;
color: black;
}
a {
display: inline-block;
position: relative;
text-decoration: none;
color: inherit;
z-index: 1;
}
a::after {
content: '';
position: absolute;
left: 0;
bottom: .07em;
height: .1em;
width: 100%;
background: linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959);
z-index: -1;
transition: height .25s cubic-bezier(.6,0,.4,1);
}
a:hover::after {
height: .2em;
}
p {
font-size: 58px;
}
Przed zawisnięciem;
Po najechaniu;
Zamiana tekstu po najechaniu myszką
Zamiana testowa ma miejsce, gdy tekst jest zamieniany na inny fragment treści lub tekst, gdy użytkownik najeżdża kursorem na cel. Doskonałym przykładem jest miejsce, w którym witryna zawiera link „komentarze”. Po najechaniu kursorem tekst linku może zmienić się na „Komentarz”.
Aby zaimplementować zamianę tekstu po najechaniu kursorem, potrzebujesz:
- ::before i ::after Pseudoelementy- Tworzą osobny element dla tekstu, który ma być zamieniony po najechaniu kursorem.
- :hover Pseudoelement zmieniający pozycję lub widoczność treści po najechaniu myszką
To jest ilustracja tego, jak zaimplementować ten efekt:
plik HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> <button><span>99 comments</span></button> </body> </html>
plik CSS:
button { width: 10em }
button { height: 3em }
button:hover span { display: none }
button:hover:before { content: "Add a Comment" }
Przed zawisnięciem;
Po najechaniu;
Strony internetowe z doskonałymi efektami najechania kursorem
Jeśli chcesz pożyczyć pomysły i uzyskać inspirację, oto kilka stron internetowych, które możesz sprawdzić.
# 1. Płótno
Canva to wielka marka w świecie projektowania, ponieważ pomaga nie-projektantom tworzyć piękne projekty. Ta witryna ma niesamowite efekty najechania kursorem, od strony głównej po strony produktów. Wszystko zaczyna się od ciemnego rozmytego tła na stronie głównej. Jednak tło czyści się po najechaniu kursorem, a obrazy stają się widoczne. Efekty najechania kursorem pojawiają się również podczas wybierania różnych szablonów projektów.
#2. Dom
Haus to doskonały przykład strony, która implementuje podkreślanie po najechaniu myszką, zamianę tekstu po najechaniu myszką i zmianę koloru tła po najechaniu myszką.
#3. Prace główne
Mainworks implementuje zarówno animacje, jak i przejścia dla swoich efektów zawisu. Niektóre godne uwagi efekty to zamiana tekstu po najechaniu myszką, zmiana koloru tekstu oraz powiększanie tekstu i obrazów po najechaniu myszką.
Wniosek
Wybór efektów najechania kursorem do Twojej witryny będzie zależał od typu witryny, umiejętności, gustu i preferencji. Niektóre witryny, takie jak platformy z grafiką i kuponami, mogą z zadowoleniem przyjąć super efektowne efekty najechania kursorem. Z drugiej strony strony prawne i medyczne mogą zdecydować się na minimalny efekt najechania kursorem.
Dlatego musisz dowiedzieć się, co działa dla Twojej witryny. Upewnij się jednak, że te efekty są zgodne z kolorami Twojej marki. Sprawdź nasze najlepsze zasoby CSS, aby doszlifować swoje umiejętności CSS.