Dzień dobry, przyjaciele! To kolejny artykuł napisany na prośbę jednej z czytelniczek mojego bloga. Dzisiaj wdrożymy możliwość wyświetlania obrazu po najechaniu kursorem myszy na link. Dlaczego może to być konieczne? Wszystko jest bardzo proste, w ten sposób możesz zaoszczędzić miejsce na stronie i jednocześnie ożywić linki.
Jak wiesz, do wdrożenia wyskakujące zdjęcia możliwe z jQuery pomoc, CSS, a także HTML. W dzisiejszym artykule opublikuję gotowy kod ten efekt, a także dać kilka dobre przykłady. Każdy skrypt jest dość prosty, tworzony przy użyciu CSS+HTML. Nie będę Cię dłużej męczył i podam gotowe rozwiązania!
Wyskakujący obraz po najechaniu myszą
a.site-ssilka:hover+div
Pozwólcie, że pokrótce wyjaśnię główne punkty. Aby wyświetlić wyskakujący obraz, musisz odwołać się do tagu
z atrybutem src i po znaku równości w cudzysłowie, podaj ścieżkę do obrazka, po wgraniu go do Folder główny strona.
Etykietka <а> z obowiązkowym parametrem href odpowiada za tworzenie i wyświetlanie linku (w moim przykładzie jest to tekst).
Jeśli elementy witryny zostały przeniesione, możesz ustawić szerokość i wysokość obrazu za pomocą właściwości szerokość oraz wzrost. Parametry są ustawione w pikselach.
Atrybut alt pozwala wyszukiwarkom na dokładniejsze rozpoznanie tego, co jest pokazane na obrazku.
Dla jasności zaznaczyłem część kodu, którą najprawdopodobniej chcesz zmienić.
Wyskakujący tekst po najechaniu kursorem na link
a.site-ssilka:hover+div
Odważniejsze!!! Najedź na mnie!
Jak widać na przykładzie, po najechaniu kursorem na tekst pojawia się podpowiedź tekstowa.
Znikający obraz po najechaniu na link
a.site-ssilka:hover+div
Odważniejsze!!! Najedź na mnie!
Aby dodać określony efekt powyżej, po prostu skopiuj kod, który Ci odpowiada i wklej go do Edytor tekstu. W ten sposób link z wyskakującym/znikającym obrazem można umieścić w dowolnym miejscu artykułu.
Ważny punkt! Każdy z prezentowanych skryptów nie szkodzi aktualności serwisu.
Uważam, że równie wygodne jest zaimplementowanie tego zadania poprzez dodanie specjalnego skryptu do pliku stylu szablonu, który zwykle nazywa się style.css.
Obraz wyskakujący CSS
pozycja: względna;
Miniatura:najedź kursorem(
Rozpiętość miniatur ( /*CSS dla powiększonego obrazu*/
pozycja: bezwzględna;
kolor tła: #3d3d3d;
obramowanie: 1px stałe białe;
widoczność: ukryta;
dekoracja tekstu: brak;
obramowanie-promień: 4px 4px 4px 4px;
Moz-border-radius: 4px 4px 4px 4px;
Webkit-obramowanie-promień: 4px 4px 4px 4px;
Rozpiętość miniatur img( /*CSS dla powiększonego obrazu*/
szerokość obramowania: 0
Thumbnail:hover span( /*CSS dla powiększonego obrazu po najechaniu myszą*/
widoczność: widoczna;
po lewej: 60px; /*pozycja, w której powiększony obraz powinien być przesunięty w poziomie */
Aby wyświetlić wyskakujące okienko po najechaniu kursorem na łącze, wstaw do tekstu następujące łącze:
Ponadto link z wyskakującym obrazem można wstawić do pewna część Twój szablon. Aby to zrobić, dodaj następujący kod do pliku index.php. Jest to plik, który definiuje wizualne rozmieszczenie elementów witryny.
Jeśli nie znasz CSS, wyjaśnię, że wpis img.animate1:hover informuje przeglądarkę, że dla wszystkich elementów , z atrybutem class równym animate1, po najechaniu na nie kursorem myszy, zastosuj określone style. A style są określone między nawiasy klamrowe( oraz ). Jeśli wszystko jest zrobione poprawnie, powinno wyglądać mniej więcej tak:
Możesz zrobić zdjęcie w pierwotnego stanu półprzezroczysty, a gdy najedziesz kursorem, spraw, by był nieprzezroczysty. Następnie musisz dodać następujące wiersze do pliku CSS:
obraz.animacja1(
filtr: alfa (Krycie=25);
krycie: 0,25
}
img.animate1:najedź(
krycie: 1
}
Wynik będzie taki:
Aby uzyskać większy efekt, możesz spowolnić zmiany przezroczystości obrazu. Aby to zrobić, możesz użyć właściwości przejścia CSS, która ustawia efekt przejścia między dwoma stanami elementu. Na przykład dodajmy jedną sekundę spowolnienia. Wtedy nasz kod CSS będzie wyglądał tak:
obraz.animacja1(
filtr: alfa (Krycie=25);
krycie: 0,25
-moz-transition: wszystkie jedynki zwalniają; /* efekt przejścia dla Firefoksa przed wersją 16.0 */
-przejście na webkit: wszystkie jedynki ułatwiają wyprowadzanie; /* efekt przejścia dla Chrome do wersji 26.0, Safari, Android i iOS */
-o-przejście: wszystkie jedynki luzują się; /* efekt przejścia dla Opery przed wersją 12.10 */
przejście: wszystkie jedynki luzy na zewnątrz; /* efekt przejścia dla innych przeglądarek */
}
img.animate1:najedź(
filtr: alfa (Krycie=100);
krycie: 1
}
Wynik:
Za pomocą właściwości transform obraz można skalować, obracać, przesuwać, pochylać. Spróbujmy powiększyć obraz. Wtedy kod css będzie wyglądał tak:
obraz.animacja1(
- O-transition: wszystkie jedynki z łatwością;
przejście: łatwość wszystkich jedynek;
}
img.animate1:najedź(
- moz-transform: skala (1,5); /* efekt transformacji dla Firefoksa przed wersją 16.0 */
- webkit-transform: skala (1,5); /* efekt transformacji dla Chrome do wersji 26.0, Safari, Android i iOS */
- o-transformacja: skala (1,5); /* efekt transformacji dla Opery przed wersją 12.10 */
- przekształcenie ms: skala (1,5); /* efekt transformacji dla IE 9.0 */
transformacja:skala(1.5); /* efekt transformacji dla innych przeglądarek */
}
A wynik będzie taki:
Obrót można dodać, aby powiększyć obraz. Wtedy style css nieco się zmienią:
obraz.animacja1(
przejście moz: łatwość wszystkich jedynek;
przejście na webkit: łatwość wszystkich 1s;
- O-transition: wszystkie jedynki z łatwością;
przejście: łatwość wszystkich jedynek;
}
img.animate1:najedź(
- moz-transform: skala obrotu (360 stopni) (1,5);
- webkit-transform: obrót (360 stopni) skala (1,5);
- o-transform: obrót (360 stopni) skala (1,5);
- ms-transform: skala obrotu (360 stopni) (1,5);
transformacja: obrót (360 stopni) skala (1,5);
}
Wynik:
Powyżej rozważaliśmy przypadki, w których w animację zaangażowany jest jeden obraz. Następnie rozważ jak zastąpić jeden obraz innym. W takim przypadku zwykle przygotowywane są dwa obrazy tego samego rozmiaru: jeden do oryginalnego widoku, drugi do jego zastąpienia.
Załóżmy, że mamy dwa obrazki, jedno czarno-białe, a drugie kolorowe:
Zróbmy to tak, że po najechaniu na czarno-biały obraz wyświetlany jest kolorowy obraz. Aby to zrobić, utworzymy oryginalny obraz jako tło elementu div za pomocą właściwości background. A kiedy najedziesz na obraz kursora, zmienimy się obraz tła przy użyciu tej samej pseudoklasy hover i właściwości tła. Aby wprowadzić ten efekt na strona html dodaj element div z klasą rotate1:
I dodaj następujące opisy stylów:
przek.obrót1(
tło: url (img/2.jpg); /* Ścieżka do pliku z oryginalnym obrazem */
szerokość: 480px /* Szerokość obrazu */
wysokość: 360px; /* Wysokość obrazu */
}
div.rotate1:hover(
tło: url (img/1.jpg); /* Ścieżka do pliku z podmienionym obrazem */
}
A wynik:
Ta metoda ma jedną istotną wadę. Ponieważ drugie zdjęcie jest ładowane tylko po najechaniu kursorem, jeśli użytkownik ma wolne połączenie internetowe, a rozmiar pliku ze zdjęciem jest duży, zdjęcie zostanie wyświetlone z przerwą. Dlatego poniżej rozważymy kilka innych sposobów zastępowania obrazów po najechaniu kursorem myszy.
Kolejna metoda polegać będzie na połączeniu dwóch zdjęć w jeden plik. Powiedzmy, że musimy umieścić na stronie przycisk, który po najechaniu na niego kursorem myszy zmieni swój wygląd. Aby to zrobić, łączymy dwa obrazy w jeden plik, a wynikowy obraz będzie wyglądał mniej więcej tak:
W takim przypadku zmiana z jednego wzoru na inny będzie realizowana przez przesunięcie zdjęcie w tle w pionie za pomocą właściwości background-position. Ponieważ po kliknięciu przycisku zwykle przechodzisz na inną stronę, wstawimy obraz do elementu< a>. Następnie wklej następujący kod na stronę html:
A w takim pliku css:
a.obróć2(
tło: url (img/button.png); /* Ścieżka do pliku z oryginalnym obrazem */
Blok wyświetlacza; /* Link jako element blokowy */
szerokość: 50px /* Szerokość obrazu w pikselach */
wysokość: 30px; /* Wysokość obrazu */
}
a.obróć2:najedź(
pozycja w tle: 0-30px; /* Przesunięcie tła */
}
Wynik:
A ostatni sposób na dziś to umieszczenie jednego obrazu pod drugim za pomocą css stanowisko: bezwzględne zasady. W tym przypadku umieszczamy dwa obrazy w kontenerze div:
I dodaj style CSS:
Animuj2(
pozycja:względna;
margin:0 auto;/* ustaw blok div na środku strony*/
szerokość:480px; /* Szerokość */
wysokość: 360px; /* Wzrost */
}
.animate2 obraz(
pozycja:bezwzględna; /* pozycjonowanie bezwzględne*/
po lewej: 0; /* wyrównaj obrazki do lewej górny róg diwa*/
góra: 0; /* wyrównaj obrazy do lewego górnego rogu elementu div */
}
Po dodaniu reguł css obrazy zostaną umieszczone jeden pod drugim. Teraz kontrolujesz przezroczystość obrazów za pomocą właściwości krycia w normalnym stanie pokażemy drugie zdjęcie, a po najechaniu kursorem na pierwsze. W tym celu w stanie normalnym sprawiamy, że obrazek z pierwszą klasą będzie całkowicie przezroczysty, a po najechaniu kursorem jest odwrotnie: obrazek z klasą drugą będzie całkowicie przezroczysty, a z klasą pierwszą będzie nie być przejrzystym:
Animate2 img.first ( /* pierwszy obraz jest w pełni przezroczysty */
krycie:0;
filtr:alfa (nieprzezroczystość=0);
}
.animate2:hover img.first ( /* pierwszy obraz staje się nieprzezroczysty po najechaniu myszą */
nieprzezroczystość:1;
filtr:alfa (nieprzezroczystość=100);
}
/* a druga staje się przeźroczysta po najechaniu */
krycie:0;
filtr:alfa (nieprzezroczystość=0);
}
Wynik:
Możesz uzyskać płynne przejście, dodając właściwość przejścia CSS do ostatniej reguły:
Animate2:najedź drugi obraz, .animate2 drugi obraz:najedź (
krycie:0;
filtr:alfa (nieprzezroczystość=0);
-moz-przejście: łatwość wszystkich dwójek;
-przejście na webkit: łatwość wszystkich 2;
-o-przejście: łatwość wszystkich dwójek;
przejście: łatwość wszystkich dwójek;
}
A wynik:
A jeśli dodamy właściwość transform:
Animate2:najedź drugi obraz, .animate2 drugi obraz:najedź (
krycie:0;
filtr:alfa (nieprzezroczystość=0);
-moz-transform:skala(0, 1);
-webkit-transform:scale(0, 1);
-o-transform:skala(0, 1);
-ms-transform:skala (0, 1);
transformacja:skala(0, 1); /* zmniejsz szerokość obrazu do 0 */
}
Wyjdzie tak:
Łącząc różne właściwości CSS, możesz osiągnąć różne efekty najechania podczas zmiany obrazów podczas najeżdżania myszą. Te i inne przykłady zamieściłem na tej stronie, skąd można również pobrać kod źródłowy. To wszystko, dopóki nie spotkamy się ponownie.
| 18.02.2016
CSS3 otwiera nieograniczone możliwości dla projektantów UI, a główną zaletą jest to, że prawie każdy pomysł można łatwo zaimplementować i wcielić w życie bez uciekania się do korzystania z JavaScript.
To niesamowite, jak proste rzeczy mogą urozmaicić zwykłą stronę internetową, czyniąc ją bardziej dostępną dla użytkowników. Mówimy o przejściach CSS3, dzięki którym możesz pozwolić elementowi na transformację i zmianę stylu, na przykład po najechaniu kursorem. Dziewięć przykładów animacji CSS3 poniżej pomoże Ci stworzyć responsywne środowisko w Twojej witrynie, a także poprawić ogólny wygląd Twojej strony dzięki pięknym płynnym przejściom.
Aby uzyskać bardziej szczegółowe informacje, możesz pobrać archiwum z plikami.
Wszystkie efekty działają z właściwością przejścia. przemiana- "przejście", "przekształcenie") i pseudoklasa: hover , która określa styl elementu, gdy najedziesz na niego kursorem myszy (w naszym tutorialu). W naszych przykładach użyliśmy div 500x309 pikseli, początkowego koloru tła #6d6d6d i czasu przejścia 0,3 sekundy.
Treść > div (szerokość: 500px; wysokość: 309px; tło: #6d6d6d; -webkit-transition: luz dla wszystkich 0.3s; -moz-transition: luz dla wszystkich 0.3s; -o-transition: luz dla wszystkich 0.3s;; przejście: wszystkie 0.3s luzu;)
1. Zmień kolor po najechaniu kursorem
Dawno, dawno temu wdrożenie takiego efektu było dość żmudną pracą, z matematycznymi obliczeniami pewnych wartości RGB. Teraz wystarczy spisać styl css, w której należy dodać pseudo-klasę: najedź na selektor i ustaw kolor tła, który płynnie (w ciągu 0,3 sekundy) zastąpi oryginalny kolor tła po najechaniu na klocek:
Kolor: najedź (tło: #53ea93;)
2. Wygląd ramy
Ciekawą i jasną transformacją jest wewnętrzna ramka, która płynnie pojawia się po najechaniu na mysz. Dobry do ozdabiania różnych guzików. Aby osiągnąć ten efekt, używamy pseudoklasy :hover oraz właściwości box-shadow z parametrem inset (ustawia cień wewnątrz elementu). Dodatkowo będziesz musiał ustawić rozciągnięcie cienia (w naszym przypadku jest to 23px) oraz jego kolor:
Border:hover ( box-shadow: wstawka 0 0 0 23px #53ea93; )
3. Huśtawka
Ta animacja CSS jest wyjątkiem, ponieważ właściwość przejścia nie jest tutaj używana. Zamiast tego użyliśmy:
- @keyframes to podstawowa dyrektywa do tworzenia animacji CSS klatka po klatce, która pozwala na wykonanie tzw. storyboard i opisz animację jako listę kluczowych punktów;
- animacja i animacja-iteracja-liczba - właściwości służące do ustawiania parametrów animacji (czasu i szybkości) oraz liczby cykli (powtórzeń). W naszym przypadku powtórz 1.
4. Próchnica
Efekt zanikania to po prostu zmiana przezroczystości elementu. Animacja jest tworzona w dwóch etapach: najpierw należy ustawić początkowy stan przezroczystości na 1 - czyli pełne krycie, a następnie określić jego wartość po najechaniu myszą - 0,6:
Zanikanie ( krycie: 1; ) .fade:hover ( krycie: 0,6; )
Aby uzyskać odwrotny wynik, zamień wartości:
5. Powiększenie
Aby pole powiększało się po najechaniu myszą, użyjemy właściwości transform i ustawimy jej wartość na scale(1.2) . W takim przypadku blok wzrośnie o 20 procent przy zachowaniu swoich proporcji:
Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )
6. Redukcja
Zmniejszenie elementu jest tak samo proste, jak jego zwiększenie. Jeśli w piątym akapicie, aby zwiększyć skalę, musieliśmy podać wartość większą niż 1, to aby zmniejszyć blok, po prostu podajemy wartość, która będzie mniejsza niż jeden, na przykład scale(0.7) . Teraz, po najechaniu myszą, blok proporcjonalnie zmniejszy się o 30 procent swojego pierwotnego rozmiaru:
Zmniejsz:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )
7. Transformacja w okrąg
Jedną z często używanych animacji jest prostokątny element, który po najechaniu na okrąg zamienia się w okrąg. Korzystanie z nieruchomości css obramowanie-promień, używany w połączeniu z :hover i transition , można to zaimplementować bez problemów:
Okrąg: najechanie ( border-promień: 70%; )
8. Obrót
Zabawną opcją animacji jest obrócenie elementu o określoną liczbę stopni. Aby to zrobić, ponownie potrzebujemy właściwości transform, ale z inną wartością - rotateZ(20deg) . Przy tych parametrach blok zostanie obrócony o 20 stopni zgodnie z ruchem wskazówek zegara względem osi Z:
Rotate:hover ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); )
9. Cień 3D
Projektanci nie są zgodni, czy ten efekt jest odpowiedni w płaskiej konstrukcji. Jednak ta animacja CSS3 jest dość oryginalna i jest również używana na stronach internetowych. Osiągniemy trójwymiarowy efekt, korzystając ze znanych nam już właściwości box-shadow (utworzy wielowarstwowy cień) i przekształcimy za pomocą parametru translateX (-7px) (zapewnimy przesunięcie bloku w poziomie w lewo o 7 pikseli ):
threed:hover ( box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -transformacja web: -7px); przekształcenie: translateX(-7px); )
Obsługa przeglądarki
Właściwość przejścia jest obecnie obsługiwana przez następujące przeglądarki:
| Przeglądarki komputerowe | |
|---|---|
| Internet Explorer | Obsługiwane przez IE 10 i nowsze |
| Chrom | Obsługiwane od wersji 26 (wcześniej wersja 25 działała z prefiksem -webkit-) |
| Firefox | Obsługiwane od wersji 16 (w wersjach 4-15 działa z prefiksem -moz-) |
| Opera | Obsługiwane od wersji 12.1 |
| safari | Obsługiwane od wersji 6.1 (w wersjach 3.1-6 działa z prefiksem -webkit-) |
Pozostałe właściwości użyte w tych przykładach, takie jak transform , box-shadow itp., są również obsługiwane przez prawie wszystkie nowoczesne przeglądarki. Jeśli jednak zamierzasz wykorzystać te pomysły w swoich projektach, zdecydowanie zalecamy dokładne sprawdzenie zgodności z różnymi przeglądarkami.
Mamy nadzieję, że te przykłady animacji CSS3 były dla Ciebie pomocne. Życzymy twórczego sukcesu!
Zanim zajmiemy się przyciskami, spójrzmy na ustawienia wspólne dla nich wszystkich.
HTML
Bo przyciski będą używane bardzo prosty html kod:
Subskrybuj
css
Również wszystkie przyciski będą miały Ustawienia główne dla tekstu napisu i odznaczenia linków:
ButtonText ( czcionka: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; ) a ( color: #fff; text-decoration: none; )
Zazwyczaj użytkownik oczekuje dość łagodnego efektu po najechaniu myszą na łącze lub przycisk. A w naszym przypadku przycisk zmienia rozmiar - zwiększa się, pokazując dodatkowy komunikat.
Główny kod CSS
Na początek musimy tylko nadać przyciskowi kształt i kolor. Zdefiniuj wysokość 28px i szerokość 115px, dodaj marginesy i dopełnienie oraz nadaj przyciskowi jasną ramkę.
#button1 ( tło: #6292c2; obramowanie: 2px stałe #eee; wysokość: 28px; szerokość: 115px; margines: 50px 0 0 50px; dopełnienie: 0 0 0 7px; przepełnienie: ukryte; wyświetlacz: blok; )
Efekty CSS3
Niektórzy lubią, gdy prostemu przyciskowi towarzyszy sporo kodu CSS. W ta sekcja zapewnia dodatkowe style CSS3 dla naszego przycisku. Możesz się bez nich obejść, ale nadają przyciskowi bardziej nowoczesny wygląd.
Zaokrąglij rogi ramki i dodaj gradient. Oto mała sztuczka z ciemnym gradientem, która działa z dowolnym kolorem tła.
/*Zaokrąglone rogi*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; promień obramowania: 15px; /*Gradient*/ obraz w tle: -webkit-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: -moz-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: -o-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: -ms-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: liniowy-gradient (góra, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0,2));
Animacja CSS
Teraz zainstalujmy Przejście CSS. Animacja zostanie wykorzystana do wszelkich zmian właściwości i potrwa pół sekundy.
Najechanie myszką
Pozostaje tylko dodać styl, aby rozwinąć przycisk po najechaniu na niego myszą. Aby wyświetlić cały post, przycisk musi mieć szerokość 230 pikseli.
#button1:najechanie (szerokość: 230px; )
Łatwa zmiana odcienia koloru
Bardzo prosty i popularny efekt CSS dla przycisku. Podczas przesuwania kursora myszy płynnie zmienia się ton koloru tła.
Główny kod CSS
Kod CSS jest bardzo podobny do poprzedniego przykładu. Używany jest inny kolor tła, a kształt jest nieznacznie modyfikowany. Tekst jest również wyśrodkowany, a wysokość linii przycisku jest ustawiona tak, aby był wyśrodkowany w pionie.
#button2 ( background: #d11717; border: 2px solid #eee; height: 38px; width: 125px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 38px; )
Efekty CSS3
Ustaw zaokrąglenie rogów, gradient tła i dodatkowy cień. Używając rgba, sprawiamy, że cień jest czarny i przezroczysty.
/*Zaokrąglone rogi*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; promień obramowania: 10px /*Gradient*/ obraz w tle: -webkit-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: -moz-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: -o-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: -ms-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: liniowy-gradient (góra, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0,2)); /*Cień*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2); -moz-box-shadow: 0px 3px 1px rgba (0, 0, 0, 0,2); box-shadow: 0px 3px 1px rgba (0, 0, 0, 0,2);
Animacja CSS
Animacja jest praktycznie taka sama jak w poprzednim przykładzie.
/*Przejście*/ -webkit-transition: Wszystkie 0.5s są łatwe; -moz-transition: Wszystkie 0.5s łatwość; -o-transition: Wszystkie 0.5s luzu; -ms-transition: Wszystkie 0.5s luzu; przejście: wszystkie 0,5 s luzu;
Najechanie myszką
Po najechaniu kursorem myszy zostanie ustawiony inny kolor tła. Spróbuj wybrać jaśniejszą opcję kolorów w Photoshopie, aby uzyskać świetny efekt.
#button2:hover ( kolor tła: #ff3434; )
Ten efekt może być dość imponujący w zależności od wyboru obrazu tła. Demo wykorzystuje nieokreślone tło, a efekt wygląda nieokreślony. Spróbuj użyć innego obrazu, a możesz uzyskać oszałamiający efekt.
Główny kod CSS
Główna część kodu jest taka sama jak w poprzednich przykładach. Zauważ, że używamy obrazu tła. Początkowa pozycja tła jest ustawiona na „0 0”. Po najechaniu kursorem pozycja przesuwa się w pionie.
#button3 ( background: #d11717 url("bkg-1.jpg"); pozycja tła: 0 0; cień tekstu: 0px 2px 0px rgba (0, 0, 0, 0,3); rozmiar czcionki: 22px; wysokość : 58px; szerokość: 155px; margines: 50px 0 0 50px; overflow: ukryty; display: block; text-align: center; line-height: 58px; )
Efekty CSS3
W tym przykładzie nie ma nic specjalnego - zaokrąglone rogi i cienie.
/*Zaokrąglone rogi*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; promień obramowania: 5px /*Cień*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2); -moz-box-shadow: 0px 3px 1px rgba (0, 0, 0, 0,2); box-shadow: 0px 3px 1px rgba (0, 0, 0, 0,2);
Animacja CSS
Animacja w tym przypadku jest dłuższa, aby stworzyć płynny i ciekawy efekt.
/*Przejście*/ -webkit-transition: Odciążenie wszystkich wersji 0.8; -moz-transition: Wszystkie 0.8s łatwość; -o-przejście: Wszystkie 0.8s łatwość; -ms-transition: Wszystkie 0.8s łatwość; przejście: wszystkie 0,8 s łatwość;
Najechanie myszką
Teraz nadszedł czas, aby przenieść obraz tła. Pozycja początkowa to „0 0”. Ustaw drugi parametr na 150px. Aby przesuwać się w poziomie, musisz zmienić pierwszy parametr.
#button3:hover ( pozycja tła: 0px 150px; )
Symulowane naciśnięcie przycisku 3D
Ostatni przykład w naszym samouczku skupia się na popularnej metodzie 3D symulowania kliknięcia przycisku po najechaniu na niego myszą. Animacja w tym przypadku jest tak prosta, że nie wymaga nawet przejścia CSS. Ale efekt końcowy jest imponujący.
Główny kod CSS
Kod CSS dla naszego przycisku.
#button4 ( background: #5c5c5c; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); rozmiar czcionki: 22px; wysokość: 58px; szerokość: 155px; margines: 50px 0 0 50px; przepełnienie: ukryte ; display: block; text-align: center; line-height: 58px; )
Efekty CSS3
W tym przypadku CSS3 nie jest już dobrą opcją. Do uzyskania efektu wymagane są cienie i gradient. Twardy cień tworzy wygląd przycisku 3D.
/*Zaokrąglone rogi*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; promień obramowania: 5px /*Cień*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba (0, 0, 0, 0,8); box-shadow: 0px 6px 0px rgba (0, 0, 0, 0,8); /*Gradient*/ obraz w tle: -webkit-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: -moz-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: -o-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: -ms-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: liniowy-gradient (góra, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0,2));
Najechanie myszką
W tym przypadku mamy największą sekcję zawisu. Długość cienia jest skrócona, a marginesy tworzą mieszankę ciemnej strefy. Wszystko razem tworzy iluzję naciśnięcia przycisku. Odwracanie gradientu wzmacnia efekt.
#button4:hover ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0.8); box-shadow: 0px 4px 0px rgba (0, 0, 0, 0.8); /*Gradient*/ obraz w tle: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); obraz tła: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) )); obraz w tle: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); obraz w tle: -ms-linear-gradient( bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); obraz w tle: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); )