Как я могу получить анимацию скольжения вверх в раскрывающемся меню панели навигации? ⇐ CSS
Как я могу получить анимацию скольжения вверх в раскрывающемся меню панели навигации?
это мой код файла style.css:
.navbar{ наберите здесь @apply flex mr-32 } .навул{ @apply flex items-center ml-24; семейство шрифтов: «Nunito Sans», без засечек; } .навул ли а{ @apply mx-[25px] текстовый шрифт-полужирный относительный курсор-указатель встроенный блок py-[32px] ведущий-9 элементов-центр текста-черный трекинг-нормальный; переход: все 0,2 с, замедление 0 с; } .navul li a::after { @apply content-[''] Absolute w-0 h-[3px] bg-[rgb(67,186,255)] переход-[ширина] длительность-[0,5 с] слева-0 снизу-0; } .navul li a:hover::after, .navul li a.active::after { ширина: 100%; } .navul ли а:hover { цвет: RGB(67, 186, 255); } .падать { @apply относительно; } .выпадающий список { @apply скрытый абсолютный bg-white min-w-[160px] w-[250%] ; z-индекс: 1000; } .dropdown ул{ @примени мою-5 } .dropdownlist а { @apply text-[black] блок без подчеркивания pl-[10px] pr-[25px] ; трансформировать: TranslateZ(10px); } .dropdown:hover .dropdownlist { @apply блокирует переход-все продолжительность-[0,3 с] легкость-[легкость-вход-выход]; трансформировать: TranslateZ(10px); } .подменю{ @apply float-none bg-white; } .подменю ли а{ @apply mx-[25px] text-[14px] шрифт-полужирный относительный указатель курсора py-[4px] Leading-8 items-center text-black text-left block ; } .submenu li a::after { @apply content-[''] относительный w-0 h-[3px] bg-[rgba(67,186,255,0)] left-0 снизу-0; } .submenu li a::before { @apply content-['//'] относительный w-0 h-[2px] bg-[rgba(67,186,255,0)] left-0 нижний-0 скрыт; переход: все 0, плавный выход 0; } .submenu li a:hover:before { @apply content-['//'] Absolute Top-[10%] bg-[rgba(67,186,255,0)] блок слева-0; } .submenu li a:hover { @apply text-[rgb(67,186,255)] переход без подчеркивания-все длительность-[0,3 с] легкость-[легкость выхода] граница поля; трансформировать:translatex(10px); } это мой index.html:
[*] ВЕБ-РАЗРАБОТКА [*]РАЗРАБОТКА КОММЕРЧЕСКОГО САЙТА [*]РАЗРАБОТКА МОБИЛЬНЫХ ПРИЛОЖЕНИЙ [*]ЦИФРОВОЙ МАРКЕТИНГ [/list] [*]Блог [*]Карьера Я хочу, чтобы раскрывающийся список сопровождался анимацией перемещения вверх
Я попробовал свой код, но он не работает.....Мне нужно раскрывающееся меню с плавной анимацией скольжения вверх, например, за 1 секунду.
как мне это сделать....я пробовал в чате gpt,....но не получается.
дайте мне решение, пожалуйста....
Я подробно рассказываю вам о коде....решите его и дайте мне ответы в коде, верните мою ошибку и дайте мне обновленный код
это мой код файла style.css:
.navbar{ наберите здесь @apply flex mr-32 } .навул{ @apply flex items-center ml-24; семейство шрифтов: «Nunito Sans», без засечек; } .навул ли а{ @apply mx-[25px] текстовый шрифт-полужирный относительный курсор-указатель встроенный блок py-[32px] ведущий-9 элементов-центр текста-черный трекинг-нормальный; переход: все 0,2 с, замедление 0 с; } .navul li a::after { @apply content-[''] Absolute w-0 h-[3px] bg-[rgb(67,186,255)] переход-[ширина] длительность-[0,5 с] слева-0 снизу-0; } .navul li a:hover::after, .navul li a.active::after { ширина: 100%; } .navul ли а:hover { цвет: RGB(67, 186, 255); } .падать { @apply относительно; } .выпадающий список { @apply скрытый абсолютный bg-white min-w-[160px] w-[250%] ; z-индекс: 1000; } .dropdown ул{ @примени мою-5 } .dropdownlist а { @apply text-[black] блок без подчеркивания pl-[10px] pr-[25px] ; трансформировать: TranslateZ(10px); } .dropdown:hover .dropdownlist { @apply блокирует переход-все продолжительность-[0,3 с] легкость-[легкость-вход-выход]; трансформировать: TranslateZ(10px); } .подменю{ @apply float-none bg-white; } .подменю ли а{ @apply mx-[25px] text-[14px] шрифт-полужирный относительный указатель курсора py-[4px] Leading-8 items-center text-black text-left block ; } .submenu li a::after { @apply content-[''] относительный w-0 h-[3px] bg-[rgba(67,186,255,0)] left-0 снизу-0; } .submenu li a::before { @apply content-['//'] относительный w-0 h-[2px] bg-[rgba(67,186,255,0)] left-0 нижний-0 скрыт; переход: все 0, плавный выход 0; } .submenu li a:hover:before { @apply content-['//'] Absolute Top-[10%] bg-[rgba(67,186,255,0)] блок слева-0; } .submenu li a:hover { @apply text-[rgb(67,186,255)] переход без подчеркивания-все длительность-[0,3 с] легкость-[легкость выхода] граница поля; трансформировать:translatex(10px); } это мой index.html:
[*] ВЕБ-РАЗРАБОТКА [*]РАЗРАБОТКА КОММЕРЧЕСКОГО САЙТА [*]РАЗРАБОТКА МОБИЛЬНЫХ ПРИЛОЖЕНИЙ [*]ЦИФРОВОЙ МАРКЕТИНГ [/list] [*]Блог [*]Карьера Я хочу, чтобы раскрывающийся список сопровождался анимацией перемещения вверх
Я попробовал свой код, но он не работает.....Мне нужно раскрывающееся меню с плавной анимацией скольжения вверх, например, за 1 секунду.
как мне это сделать....я пробовал в чате gpt,....но не получается.
дайте мне решение, пожалуйста....
Я подробно рассказываю вам о коде....решите его и дайте мне ответы в коде, верните мою ошибку и дайте мне обновленный код
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение
-
-
Меню навигации ShadcnUI — расположите раскрывающийся список в меню/панели навигации [закрыто]
Anonymous » » в форуме CSS - 0 Ответы
- 25 Просмотры
-
Последнее сообщение Anonymous
-