Jak zmienić kolor po najechaniu kursorem na element witryny?

Kolejnym ważnym i złożonym efektem jest Rotation on Hover. Aby obrócić element po najechaniu kursorem, dodaj lub wybierz element i przejdź do panelu właściwości. Przejdź do i kliknij łącze Aktywuj w sekcji Animacja włączona, a następnie zaznacz pole wyboru Aktywuj. Użyj suwaka, aby ustawić kąt obrotu lub wprowadź wartość w polu wejściowym. Obsługiwane wartości kąta obrotu wynoszą od 0 do 359.

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.

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.

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.

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ć 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.

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.

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.

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.

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.