Jak obrócić element po najechaniu kursorem na stronę internetową

Ustawienie koloru elementu po najechaniu kursorem pomaga skupić uwagę odwiedzających na elemencie i daje wrażenie i koncepcję pożądanego pomysłu na temat jego znaczenia. Możesz zmienić kolor elementu po najechaniu kursorem. W tym celu wybierz element i w panelu właściwości przejdź do sekcji Animacja włączona, kliknij łącze Aktywuj, a następnie pole wyboru Aktywuj. Zmodyfikuj kolor, który ma zostać zastosowany po najechaniu myszą.

Efekty animacji najechania używane na nowoczesnych stronach internetowych stały się bardziej wyrafinowane. Jednym z przykładów efektów jest Element Move on Hover. Możesz dodać ruch elementu po najechaniu kursorem. Dodaj lub wybierz element i przejdź do panelu właściwości. Kliknij łącze Hover, a następnie zaznacz pole wyboru Hover. Ustaw wartości właściwości Przesuń X, Y.

Ramka elementu jest również ważna, aby poprawić interakcję elementów i przyciągnąć uwagę odwiedzających. Możesz zmienić Hover Border dla takich elementów jak ikona, obraz, kształt, grupa, siatka itp. W sekcji Hover panelu właściwości zaznacz pole wyboru Hover. Zmodyfikuj obramowanie, które ma być wyświetlane podczas najeżdżania na element.

Możesz także zmienić Wypełnienie na Obrazy, a nawet zmienić jeden obraz tła na inny podczas najechania kursorem, co może bardzo zabawić odwiedzających. Wybierz kształt i dodaj obraz tła. Przejdź do sekcji Animacja włączona w panelu właściwości i kliknij na wskaźniku myszy. Włącz efekt Hover i wybierz Obraz jako Typ tła. Wybierz obraz po najechaniu. Test.

Możesz zmodyfikować właściwość Shadow po najechaniu kursorem na teksty i inne elementy. Aby ustawić cień po najechaniu, dodaj lub wybierz element. Następnie kliknij łącze Hover Panelu właściwości, zaznacz pole Hover, zmodyfikuj cień, który ma być zastosowany po Hover. Możesz zacząć od jednego z ustawień wstępnych cieni i dostosować go w razie potrzeby.

Możesz zmodyfikować Przejrzystość elementu w Hover, aby dodać interakcji i atrakcyjności do projektu witryny. W Panelu właściwości kliknij łącze Aktywuj i zaznacz pole Aktywuj. Ustaw przezroczystość do zastosowania po najechaniu. Kliknij gdzieś w bloku, aby odznaczyć element. Najedź na element, aby przetestować zmianę przezroczystości.

Dodając animację najechania do kształtu z tłem, możesz zmienić pełne wypełnienie na coś atrakcyjnego, na przykład gradient. W tym celu wybierz kształt i przejdź do łącza aktywującego panelu właściwości. Kliknij łącze Animacja włączona -> najechanie kursorem i zaznacz pole wyboru najechanie kursorem. Wybierz typ gradientu dla tła i ustaw gradient.

W przypadku obrazów i kształtów, grup i komórek siatki możesz zmienić promień po najechaniu kursorem. Dzięki tej właściwości elementy stają się atrakcyjne, podpowiadając działanie (przyciski Kup teraz, Czytaj więcej itp.) i czyniąc projekt wyjątkowym. W sekcji Hover panelu właściwości włącz tryb Hover. Przeciągnij suwak Promień, aby ustawić jego wartość przy najechaniu.

Możesz zarządzać animacją najechania, ustawiając jej czas trwania. Ustaw czas trwania animacji po najechaniu kursorem, dodaj lub wybierz element i przejdź do panelu właściwości. Wybierz łącze Aktywacja w sekcji Animacja włączona i zaznacz pole wyboru Aktywuj. Obsługiwane wartości dla suwaka to od 10 do 200 i w razie potrzeby możesz wpisać większą liczbę w tym polu.

Skalowanie może wyglądać jak najbardziej naturalna reakcja na kursor. Dlatego może być bardzo popularny. Możesz łatwo dodać Scale On Hover do swojej witryny. W tym celu dodaj lub wybierz element, a następnie przejdź do panelu właściwości. Kliknij łącze Aktywuj w sekcji Animacja włączona i zaznacz pole Aktywuj. Przewiń w dół do właściwości Skaluj, Obróć i Przesuń. Rzeczywisty rozmiar to 100.