• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Animowana linia w CSS

VPS Starter Arubacloud
+2 głosów
1,633 wizyt
pytanie zadane 19 listopada 2017 w HTML i CSS przez Yashe Dyskutant (7,720 p.)

Witam, 

Chciałbym aby po najechaniu na opcję w menu rozwinęła się (animacją) linia (border-bottom).
Efekt często stosowany na stronach.. Linia ma rozwinąć się od środka w obie strony aż do momentu gdy osiągnie przypisaną szerokość.

Mógłby ktoś pomóc ? 

Pozdrawiam serdecznie.

 

4 odpowiedzi

+3 głosów
odpowiedź 19 listopada 2017 przez lapacz.kornel Mądrala (6,930 p.)
wybrane 19 listopada 2017 przez Yashe
 
Najlepsza

Przykład. Jak jakiejś części kodu nie rozumiesz pytaj smiley.

komentarz 19 listopada 2017 przez Yashe Dyskutant (7,720 p.)
Dziękuje, dokładnie o to chodziło. Kod przejrzysty, więc już rozumiem jak to wykonać, haha
+2 głosów
odpowiedź 19 listopada 2017 przez jaca121212 Nałogowiec (40,760 p.)
Wydaje mi się że zrobisz to za pomocą pseudo-class before i after plus box-shadow.
+2 głosów
odpowiedź 19 listopada 2017 przez pablop76 VIP (123,060 p.)
+2 głosów
odpowiedź 19 listopada 2017 przez Codeboy Stary wyjadacz (12,120 p.)

Stwórz sobie element na ::after (lub dodatkowy element z daną klasą), który ma wybrane właściwości na start i width: 0. Dorzuć na te atrybuty które mają się zmieniać - transition, żeby podczas zmiany właściwości płynnie zmieniały swój stan. Później zrób hover na "wrapper" (np. .menu:hover .klasa-twojej-animacji) i daj width np. 80% + cokolwiek co chcesz, żeby jeszcze się zmieniało z początkowej wersji.

Po najechaniu powstanie Ci animacja rozszerzająca ten element od 0 do 80% + twoje dodatkowe zmiany.

Podobne pytania

+1 głos
1 odpowiedź 121 wizyt
0 głosów
1 odpowiedź 234 wizyt
pytanie zadane 17 grudnia 2017 w HTML i CSS przez Alcomats Użytkownik (580 p.)
0 głosów
2 odpowiedzi 139 wizyt
pytanie zadane 15 lutego 2017 w HTML i CSS przez Allen Obywatel (1,010 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...