Efekty najechania na tło strony. Oryginalne efekty po najechaniu kursorem myszy na obiekty

Efekt najechania CSS

przemiana
skala transformacji (x, y)
: najedź :: przed :: po

Opisywanie głównych stylów / efektów obrazu w css

Ustawiamy blok z obrazem na stałą szerokość i wysokość, a za pomocą przelewu: ukryty, ukryj wszystkie niepotrzebne poza nim, dodaj kursor.

BlocImg (szerokość: 600px; wysokość: 338px; przepełnienie: ukryte; kursor: wskaźnik;)

Dla wygody blok ustawiamy na środku ekranu.

Dws (pozycja: bezwzględna; góra: 50%; lewa: 50%; transformacja: przetłumacz (-50%, -50%);)

Następnie robimy obraz w 100% szeroki i zawieszamy płynną animację w pół sekundy.

BlocImg img (szerokość: 100%; przejście: .5s;)

Ustaw filtr rozmycia na 1 szczyt. filtr: rozmycie (1px) i przyciemnienie tła, a do tego dodajemy czarne tło do klasy .blocImg, a po najechaniu na sam obrazek sprawiamy, że obrazek jest półprzezroczysty krycie: .5; ...

Dws: hover .blocImg img (przekształcenie: obrót (-10deg) skala (1.3); filtr: rozmycie (1px); krycie: .5;)

Teraz zacznijmy stylizować tekst.

Dekorowanie treści tekstowej bloku

Ustawiamy blok .blocText jako bezwzględnego rodzica i ustawiamy marginesy na wszystkich krawędziach na 30 pt. W przyszłości wykonamy animowany wygląd wzdłuż ramy.

BlocText (kontur: 1 piksel pełny pomarańczowy; pozycja: bezwzględna; góra: 30 pikseli; lewy: 30 pikseli; prawy: 30 pikseli; dół: 30 pikseli;)

W przypadku tekstu ustaw kolor na biały, ustaw go wielkimi literami, ustaw dopełnienie wokół krawędzi.

Tekst (kolor: #fff; transformacja tekstu: wielkie litery; dopełnienie: 0 20px;)

Ustaw nagłówek drugiego poziomu na 25 kolców.

Tekst h2 (rozmiar czcionki: 25px;)

Drugą część robimy na pomarańczowo, ustawiamy wcięcia od dołu dla linii i robimy podkreślenie w 2 pikach.

Tekst h2 span (kolor: pomarańczowy; padding-bottom: 3px; border-bottom: 2px solid #fff;)

Ustawiamy akapit bezwzględnie, obniżamy go o 180 pików. ustaw szerokość jego bloku na 250 pikseli. Dodaj 4 szczytowe obramowanie po lewej stronie. i ustaw dopełnienie.

Tekst p (pozycja: bezwzględna; góra: 180px; szerokość: 250px; obramowanie po lewej: 4px solid # ffb611; dopełnienie: 0 10px;)

Opisywanie :: przed i :: po pseudoelementach

Usuńmy kontur konturu, który był wcześniej przypisany do klasy .blocText i ustawmy go dla pseudoelementów.

Twórz pseudoelementy :: przed :: po, opisz ich podstawowe style.

Pozycjonujemy je bezwzględnie, ustawiamy szerokość i wysokość na 100%, a płatny wygląd na pół sekundy.

BlocText :: przed, .blocText :: po (treść: ""; pozycja: bezwzględna; góra: 0; lewa: 0; szerokość: 100%; wysokość: 100%;)

Oddzielnie :: zanim przypiszemy granicę od góry i dołu do 1 piku. i ustaw transformację dla transformacji osi X: scale (0,1).

BlocText :: before (border-top: 1px solid #fff; border-bottom: 1px solid #fff; transform: scale (0,1);)

To samo robimy dla :: po, tylko granica jest teraz po lewej i prawej stronie, a transformacja wzdłuż osi Y

BlocText :: after (border-left: 1px solid #fff; border-right: 1px solid #fff; transform: scale (1,0);)

A dla ich wyglądu wskazujemy transformację dla wszystkich osi w 1.

Dws: hover .blocText :: przed, .dws: hover .blocText :: po (przekształcenie: skala (1,1);)

I pozostaje ukryć tekst, w tym celu ustawiamy klasę .text na opacity: 0 i dodajemy jej gładki wygląd.

Po najechaniu kursorem pojawi się tekst.

Dws: najedź .text (przezroczystość: 1;)

W końcu otrzymaliśmy fajne efekty najechania kursorem po najechaniu kursorem na zdjęcie.

Ktokolwiek był zainteresowany filmem, udostępnij go znajomym w sieciach społecznościowych i nie zapomnij jednocześnie skomentować.

Lekcja została przygotowana przez Denisa Gorelova.

Przede wszystkim tym, którzy nie do końca lub wcale nie są w temacie, pokrótce wyjaśnię, co to jest. Są to różnego rodzaju efekty (wyskakujące napisy, podpowiedzi, płynne przejścia, transformacja, obrót, powiększenie, przesunięcie itp.) stosowane do elementów strony internetowej po najechaniu na nie kursorem myszy. Efekty te można zaimplementować za pomocą różnych wtyczek jQuery lub czysto.
Dziś przygotowałem duży wybór oryginalnych efektów najechania dla obrazów tworzonych przy użyciu CSS3, bez podłączania bibliotek javascript. Nie będę mówił o zaletach i wadach implementacji efektów najechania w czystym CSS3, to inny temat, wystarczy spojrzeć na przykłady i w razie potrzeby użyć tego, który lubisz na swojej stronie. Wszystkie efekty przedstawione w przeglądzie są dostarczane z przykładem demo i szczegółową dokumentacją ze źródłami. Podręczniki są w większości w języku burżuazyjnym, ale wszystko jest mniej lub bardziej intuicyjne.

Chcę tylko zwrócić uwagę na fakt, że wszystkie te przykłady będą działać poprawnie tylko w nowoczesnych przeglądarkach obsługujących właściwości CSS3.

Aby nie zepsuć ogólnego obrazu, nie przeinaczył nazw efektów tłumaczeniem maszynowym (poza niektórymi), zostawił oryginały tytułów, jak je nazwał deweloper.

Bardzo ciekawy efekt przy najechaniu na miniatury, przy użyciu cienkich linii w projektowaniu i typografii. Kilka różnych typów efektów wyglądu podpisów pod zdjęciami, miękkie i nieinwazyjne przekształcenia 3D oraz płynne przejścia pseudoelementów. Działa tylko w nowoczesnych przeglądarkach.

iHover to imponująca kolekcja czystych efektów najechania CSS3, z obsługą Bootstrap 3. Zbudowany z Scss CSS (plik), łatwo modyfikowalny za pomocą zmiennych. Kod jest modułowy, nie ma potrzeby dołączania całego pliku. Ponad 30 różnych efektów w jednym pakiecie. Wszystko jest dość dobrze udokumentowane, a efekty są bardzo łatwe w użyciu. Wszystko, co musisz zrobić, to poprawnie wyrównać znaczniki HTML i połączyć plik CSS, aby działał.

Tworzy proste, ale stylowe efekty najechania na podpisy obrazów. Chodzi o to, aby tytuł, nazwisko autora i przycisk linku pojawiały się dramatycznie po najechaniu kursorem na miniatury. W przypadku niektórych efektów używane są wizualne przekształcenia 3D.

Bardzo prosty efekt przejścia, bez żadnych specjalnych dzwoneczków i gwizdków, całkowicie okrągły obraz w kadrze, przekształca się poprzez zmianę ostrości po najechaniu i to wszystko.

Efekty najechania dla miniatur CSS3

Deweloper pozycjonuje swoją pracę jako przykład galerii obrazów z efektami przejścia, gdy pojawiają się adnotacje (podpisy) dla miniatur. Deklarowane jest silne wsparcie dla nowoczesnych przeglądarek, w tym IE 9+. Oczywiście trudno nazwać to pełnoprawną galerią, ale efekt pojawienia się podpisów jest dość ciekawy.

Kolejny zestaw reguł CSS do tworzenia imponujących efektów transformacji po najechaniu kursorem na absolutnie okrągłe miniatury. Pakiet zawiera 7 rodzajów przejść CSS3, bardzo szczegółową dokumentację dotyczącą konfiguracji i użytkowania. Efekty są obsługiwane przez wszystkie nowoczesne przeglądarki.

Obracanie miniatur po najechaniu myszą

Prosty efekt obracania okrągłych miniatur po najechaniu na nie kursorem myszy jest mniej więcej taki sam, jak widać na moim blogu, w ogłoszeniach postów na stronie głównej. Jest zaimplementowany w kilku linijkach kodu css.

Jeśli przetłumaczone dosłownie: „Skutek seksualny po najechaniu kursorem”. Oczywiście, nie zauważysz w tym efekcie czegoś tak seksownego, chyba że masz gwałtowną wyobraźnię, ale efekt jest ciekawy na swój sposób i warto na to zwrócić uwagę.

Pięć różnych efektów najechania na obrazy. Napisy wyskakujące w trzech wariantach, zasłony w postaci zmieniającej się stopnia przezroczystości i rotacji wraz z ruchem poziomym.

4 rodzaje efektów animacji dla podpisów obrazów, zaimplementowanych wyłącznie przy użyciu CSS3. Różne pozycje zanikania i efekty przejścia, całkiem standardowe wykonanie. Aby zrozumieć, jak działa animacja, spójrz na kod źródłowy strony demo, nie znalazłem żadnej osobnej dokumentacji.

Miniatury wyłożone galerią z różnymi wyglądami podpisów, rotacją, zanikaniem, popem i nie tylko. Dokumentacja dotycząca używania i konfiguracji jest raczej skąpa, ale możesz to rozgryźć, jeśli naprawdę chcesz.

Ten efekt nie reprezentuje niczego szczególnego, banalnej zmiany jasności obrazów po najechaniu kursorem, z wyjątkiem dodania elementów animacji. Będziesz musiał samodzielnie dopracować szczegóły implementacji, rozszerzając kod źródłowy wersji demonstracyjnej.

Kolejny zestaw 10 efektów najechania na obrazy, różne modyfikacje miniatur po najechaniu, powiększaniu, obracaniu, obracaniu, zanikaniu itp.

Różne efekty animacji ramki wokół obrazów, wyglądają dość atrakcyjnie, istnieje szczegółowy przewodnik dotyczący konfiguracji i użytkowania.

Zastosowano oryginalne efekty najechania CSS3 w celu efektywnego wyświetlania podpisów miniatur po najechaniu myszą. Zestaw reguł CSS zawiera 10 różnych efektów, których można używać osobno dla różnych obrazów. Efekty są naprawdę imponujące, zwłaszcza gdy zdajesz sobie sprawę, że wszystko odbywa się za pomocą CSS3. Szczegółowy przewodnik pomoże ci dowiedzieć się, co jest co.

Pomysł polega na stworzeniu SVG, który jest kształtem tła dla pewnego rodzaju napisów i zamienia się w inny kształt po najechaniu myszą. W ten sposób można wprowadzić wiele różnych opcji, w przykładzie pokazane są trzy rodzaje efektów przejścia. Zaletą korzystania z SVG jest to, że możemy zmienić rozmiar formularza, aby pasował do kontenera nadrzędnego.

Przesuwane obrazy

Istotą tego efektu jest to, że obraz porusza się w górę iw dół, tworząc podpis. Jeśli pracujesz z parametrami stylu, myślę, że możesz osiągnąć całkiem niezłe efekty, ale domyślnie wszystko wygląda bardzo prosto.

Z tym efektem wszystko jest proste, podpisy do zdjęć wysuwają się z góry na prawo lub z lewej na dół, w postaci wstążki z półprzezroczystym ciemnym tłem, wszystko bardzo łatwo przeformułować za pomocą właściwości css.

Ciekawe rozwiązanie, miniatury prezentowane są w przyciemnionej formie, po najechaniu na nie pojawiają się obrazy i podpis na jasnym tle.

Podpis obrazu wyłania się z narożnika i rozciąga się po przekątnej na całym obszarze obrazu.

Kilka ciekawszych rozwiązań do implementowania podpisów wyskakujących w miniaturach obrazów. W edytorze online możesz eksperymentować z parametrami i osiągać bardziej imponujące wyniki.

Zestaw pięknych efektów przy najechaniu na miniatury, różnego rodzaju wygląd i wygląd podpisów do zdjęć. Cienkie linie w przeciwieństwie do lekko przyciemnionego tła tworzą czytelne bloki informacyjne.

Dziwaczne kształty i efekt powiększenia w połączeniu z efektem animacji podpisów do miniatur.

Wspaniałe efekty nakładania ikon na miniatury zdjęć w różnych wariantach wyglądu. W przykładzie użyto symbolu (+) nakreślonego w kole za pomocą promienia obramowania: w CSS można również użyć czcionki ikon, aby panel podręczny był bardziej informacyjny.

Przykład tworzenia wizualnego efektu slajdu do generowania podpisów wolumetrycznych do obrazów przy użyciu tylko CSS3 i HTML5.

6 podpisów pod zdjęciami

6 Opcje wyglądu wyskakujących podpisów dla obrazów po najechaniu kursorem za pomocą CSS3. Szczegółowa lekcja implementacji i konfiguracji, źródła do pobrania.

I na koniec, że tak powiem, nie mogę nie wspomnieć o najprostszym sposobie tworzenia wyskakującego podpisu dla miniatury za pomocą CSS3.

Usługa SendPulse to narzędzie marketingowe do tworzenia bazy subskrypcji i konwersji przypadkowych odwiedzających Twoją witrynę na zwykłych. SendPulse łączy najważniejsze funkcje przyciągania i utrzymywania klientów na jednej platformie:
● newslettery e-mailowe,
● web-push,
● wysyłka SMS,
● SMTP,
● wiadomości w Viber,
● wysyłanie wiadomości do komunikatora na Facebooku.

E-mail z biuletynem

Wysyłanie powiadomień push

SMTP

Boty Facebook Messenger

Wysyłanie SMS-ów

Program partnerski

Jeśli podoba Ci się efekt, możesz po prostu skopiować gotowy kod i użyć go!

Ożyw swoją witrynę!

Różne efekty najechania mogą zapewnić świeżość stronom Twojej witryny. Wcześniej dla jakiegokolwiek efektu trzeba było mieć do czynienia z javascriptem, ale dziś, po pojawieniu się technologii CSS3, wszystko można zrobić z pominięciem javascriptu.

Dzisiejsze przykłady są zaimplementowane i zoptymalizowane dla nowych nowoczesnych przeglądarek i na pewno będą w nich działać (na przykład w przeglądarkach Mozilla lub WebKit). Nie możemy zapewnić o pracy w IE, ale w najnowszych wersjach efekty na pewno będą działać zgodnie z oczekiwaniami. Ale nie zapominaj, że dla każdego efektu przygotowano atrakcyjną opcję cofania na wypadek, gdyby przeglądarka nadal nie obsługuje tego efektu.

01. Zwiększenie

Próbny: Obejrzeć

Ten efekt jest bardzo łatwy do wdrożenia i można to zrobić na kilka sposobów. Użyliśmy metody, w której do każdego obrazu dodawany jest parametr marginesu, a następnie, po najechaniu kursorem myszy, ten parametr jest usuwany. Załóżmy, że ustawienie marginesu zaczyna się od 15 pikseli, a po najechaniu kursorem na 2 piksele, co sprawia, że ​​obraz wydaje się odbijać. Możesz także użyć tego efektu z tekstem, nawet jeśli linki są ustawione pionowo, a nie poziomo.

Przejście tutaj można ustawić według własnego uznania, a efekt będzie również atrakcyjny bez żadnego przejścia. Na przykład sprawiliśmy, że efekt był nieco gładszy, co wydawało się dodać trochę smaczku efektowi.

Podbij CSS

Ex1 zdjęcie (
obramowanie: stałe 5px #ccc;
pływak: lewy;
margines: 15px;
-przejście na webkit: margines luzu 0,5s;
-moz-transition: margines luzu 0,5s;
-o-transition: margines 0.5s luzu;
}

Obraz Ex1: najedź (
margines górny: 2px;
}
02. Stos i rozwój

Autor tego efektu najwyraźniej chciał osiągnąć coś w rodzaju efektu lampy lawowej, ponieważ po najechaniu myszką na listę linków, każdy obraz powoli się powiększa, a następnie wraca do swoich pierwotnych rozmiarów.

Do realizacji tutaj zostały użyte obrazy o rozmiarze 400x133 pikseli. Zostały one następnie przeskalowane do 300 x 100 pikseli za pomocą CSS i rozwinięte po najechaniu myszą. Ponieważ w przykładzie cała lista jest wyśrodkowana, nowy rozmiar obrazów spowodował załamanie całej linii trasowania. Ten problem można rozwiązać, ustawiając ujemne marginesy na połowę szerokości powiększonych obrazów.

Kod CSS dla Stack & Grow

/ * Przykład 2 * /
#pojemnik (
szerokość: 300px;
margines: 0 auto;
}

# zdjęcie ex2 (
wysokość: 100px;
szerokość: 300px;
margines: 15px 0;
-przejście na webkit: łatwość wszystkich 1s;
-moz-transition: wszystkie jedynki łatwość;
-o-przejście: łatwość wszystkich jedynek;
}

# ex2 img: najedź (
wysokość: 133px;
szerokość: 400px;
margines lewy: -50px;
}
03. Zanikanie tekstu

Tutaj autor chciał stworzyć coś w rodzaju zdarzenia typu javascript, gdy najedziesz kursorem na jeden element, a efekt zostanie wyświetlony na innym. Tutaj tekst i obraz zostały zrobione, a następnie umieszczone w osobnym div, wyrównane do lewej. Następnie do elementu div dodano parametry color: transparent i line-height: 0px. Umożliwiło to umieszczenie tekstu na górze elementu div i całkowite ukrycie go.

Aby tekst pojawił się ponownie, po prostu zmieniamy kolor i wysokość linii. Gdy najedziesz kursorem na obraz, tekst pojawi się ponownie. Bardzo zabawny i łatwy efekt.

Zanikanie tekstu w CSS

# ex3 (
szerokość: 730px;
wysokość: 133px;
wysokość linii: 0px;
kolor: przezroczysty;
rozmiar czcionki: 50px;
rodzina czcionek: „HelveticaNeue-Light”, „Helvetica Neue Light”, „Helvetica Neue”, Helvetica, Arial, bezszeryfowy;
grubość czcionki: 300;
transformacja tekstu: wielkie litery;

}

# ex3: najedź (
wysokość linii: 133px;
kolor: # 575858;
}

# ex3 obraz (
pływak: lewy;
margines: 0 15px;
}
04. Krzywe zdjęcie

Ten efekt jest bardzo prosty, ale świetnie sprawdza się w przypadku galerii miniatur. Najpierw musisz utworzyć siatkę obrazów, a następnie obracać obrazy po najechaniu na nie, co daje atrakcyjny efekt.

Istnieje wiele nowych wartości CSS do wykorzystania, więc warto rozważyć również opcję wycofania dla starszych przeglądarek. W naszej galerii wykorzystamy przejścia, przekształcenia i cienie blokowe, jednak zgodnie z Państwa życzeniem. Transformacja odpowiadać będzie za rotację obrazu, a przejścia będą odpowiadać za efekt miękkości i płynności.

Tutaj możesz zastosować pseudoselektory.

Krzywe zdjęcie CSS

# ex4 (
szerokość: 800px;
margines: 0 auto;
}

# ex4 obraz (
margines: 20px;
obramowanie: stałe 5px #eee;
-webkit-box-shadow: 4px 4px 4px rgba (0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba (0,0,0,0.2);
box-shadow: 4px 4px 4px rgba (0,0,0,0.2);
-przejście na webkit: zwolnienie wszystkich 0,5s;
-moz-transition: wszystkie 0.5s luzu;
-o-przejście: wszystkie 0.5s luzu;
}

# ex4 img: najedź (
-webkit-transform: obróć (-7deg);
-moz-transform: obróć (-7deg);
-o-transform: obróć (-7deg);
}
05. Zanikanie i refleksja

Ten efekt jest trochę bardziej skomplikowany do wykonania, więc musieliśmy trochę pomajstrować, aby uzyskać przyzwoity efekt. Standardowa pozycja obrazu jest lekko przezroczysta. Następnie, gdy najedziesz kursorem na obraz, poziom przezroczystości zostaje obniżony i obraz powraca do swojego pierwotnego wyglądu, a także pojawia się lekki blask i odbicie (tylko dla przeglądarek z rodziny WebKit).

Niestety odbicie nie jest tak naprawdę przejściem, więc pojawia się natychmiast, mimo że reszta treści pojawia się w zwolnionym tempie.

Jeśli nie masz pewności co do CSS dla odbić, możesz przeczytać więcej na ten temat w (David Walsh).

Efekt zanikania i odbijania CSS

# ex5 (
szerokość: 700px;
margines: 0 auto;
min-wysokość: 300px;
}

# zdjęcie ex5 (
margines: 25px;
krycie: 0,8;
obramowanie: stałe 10px #eee;

/ * Przemiana * /
-przejście na webkit: wszystkie 0.5s luzu;
-moz-transition: wszystkie 0.5s luzu;
-o-przejście: wszystkie 0.5s luzu;

/ * Odbicie * /
-webkit-box-reflect: poniżej 0px -webkit-gradient (liniowy, lewy górny, lewy dolny, od (przezroczysty), kolor-stop (.7, przezroczysty), do (rgba (0,0,0,0.1)) );
}

# ex5 img: najedź (
krycie: 1;

/ * Odbicie * /
-webkit-box-reflect: poniżej 0px -webkit-gradient (liniowy, lewy górny, lewy dolny, od (przezroczysty), kolor-stop (.7, przezroczysty), do (rgba (0,0,0,0.4)) );

/ * Blask * /
-webkit-box-shadow: 0px 0px 20px rgba (255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba (255,255,255,0.8);
box-shadow: 0px 0px 20px rgba (255,255,255,0.8);
}
Wniosek

Te 5 przykładów powinno wystarczyć, aby zainspirować Cię do stworzenia czegoś własnego. Pamiętaj, że zawsze możesz poeksperymentować z gotowymi przykładami, a potem nam o nich opowiedzieć.

Jeśli natrafiłeś gdzieś w sieci na inne atrakcyjne efekty, to poinformuj nas i pozostałych czytelników o tym.