Мобильная версияЯ новичок. Я пытаюсь создать веб-страницу для тренировок. Я добавил библиотеку js под названием «AOS (анимация при прокрутке)». Библиотека работает нормально, но после добавления библиотеки моя собственная анимация перехода CSS не работает.
Отслеживание: строка HTML: 110 (work Div), строка CSS: 156 (селектор .work)
Мои коды
AOS.init(); daisyjs(document.getElementById('ромашка'), { dotColor: '#000', цвет линии: '#000' }); var typed = new Typed('.strings', { строки: [ 'Веб-разработчик', «Фронтальный разработчик», «Бэкенд-разработчик», 'Программист' ], цикл: правда, ТипСкорость: 60, Скорость назад: 20, }); .container { ширина: 90%; максимальная ширина: 1080 пикселей; маржа: авто; заполнение: 5rem 0; высота строки: 1,5; } .sh { выравнивание текста: по центру; маржа: 0 авто 3,5рем; } .sh-t { размер шрифта: 45 пикселей; } .sh-st { маржа-верх: 0,8рем; размер шрифта: 22 пикселей; вес шрифта: 500; цвет: #2c3e50; } .btn-g { черный цвет; фон: золото; граница: 2 пикселя из чистого золота; начертание шрифта: жирный; радиус границы: 30 пикселей; заполнение: 0,75рем 1,5рем; курсор: указатель; переход: все 0,5 секунды легкости; } .btn-g:hover { заполнение: 0,75 бэр 2,5 бэр; } .btn-b { белый цвет; фон: #000; граница: 2 пикселя, сплошная #000; начертание шрифта: жирный; радиус границы: 30 пикселей; заполнение: 0,75рем 1,5рем; курсор: указатель; переход: все 0,5 секунды легкости; } .btn-b:hover { заполнение: 0,75 бэр 2,5 бэр; } а { текстовое оформление: нет; } я { размер шрифта: 25 пикселей; переход: все 0,4 секунды легкости; } я:наведите { цвет: золото; } .золото { цвет: золото; } .белый { белый цвет; } .черный { черный цвет; } * { маржа: 0; заполнение: 0; размер коробки: граница-коробка; семейство шрифтов: «Поппинс», без засечек; стиль списка: нет; } html { поведение прокрутки: плавное; } /* --------------- Заголовок --------------- */ заголовок { ширина: 100%; минимальная высота: 100vh; } .крышка { цвет фона: золото; высота: 10рем; } .коробка { выравнивание текста: по центру; маржа-верх: -6,5рем; положение: относительное; } .box > изображение { ширина: 200 пикселей; радиус границы: 50%; курсор: указатель; граница: 5 пикселей из чистого золота; } .имя { размер шрифта: 60 пикселей; поле-дно: 1рем; } .строки { цвет: золото; } .btn-box { маржа: 5бэр 0 3бэр; } .icon-box { поле-дно: 3rem; } .social-icon { поле: 0 5 пикселей; размер шрифта: 20 пикселей; цвет: #000; } /* --------------- Опыт --------------- */ #опыт { цвет фона: #000; выравнивание текста: по центру; начертание шрифта: жирный; цвет: #fff; } .опыт-1 { дисплей: сетка; столбцы-шаблона сетки: 1fr 1fr 1fr 1fr; зазор в сетке: 3рем; } .experience-1 раздел { граница: 3 пикселя из чистого золота; радиус границы: 5 пикселей; отступы: 1рем 0,5рем; переход: все 0,5 секунды легкости; } Раздел .experience-1:hover { фон: золото; цвет: #000; заполнение: 0 0,7рем; курсор: указатель; } .experience-1 раздел h1 { цвет: золото; маржа: 1бэр 0 0,5бэр 0; } Раздел .experience-1:hover > h1 { цвет: #000; } .experience-1 я { размер шрифта: 50 пикселей; цвет: золото; } Раздел .experience-1: наведите курсор > я { цвет: #000; } /* --------------- Работает --------------- */ #работает { фон: золото; } .работа { дисплей: сетка; столбцы шаблона сетки: 1fr 1fr; зазор в сетке: 5бэр; выравнивание текста: по центру; маржа-верх: 3рем; поле-дно: 3rem; переход: все 0,5 секунды легкости; } .work:наведите { box-shadow: 0 0 20 пикселей черный; } .work-информация { дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; гибкое направление: столбец; } .work-info h1 { размер шрифта: 30 пикселей; } .work-изображение img { дисплей: блок; ширина: 100%; курсор: указатель; } /* --------------- Работайте со мной --------------- */ #wwm { цвет фона: #000; } .н-е { ширина: 100%; дисплей: сетка; столбцы шаблона сетки: 1fr 1fr; сетка-столбец-зазор: 3rem; } .input-область { размер шрифта: 18 пикселей; отступ: 10 пикселей; цвет фона: #ecf0f1; граница: прозрачная; контур: нет; радиус границы: 5 пикселей; } .textarea { дисплей: блок; ширина: 100%; маржа: 2рем 0; } .submit-btn { черный цвет; размер шрифта: 18 пикселей; вес шрифта: 500; фон: золото; граница: 2 пикселя из чистого золота; радиус границы: 30 пикселей; заполнение: 0,7рем 3рем; курсор: указатель; дисплей: блок; маржа: авто; переход: все 0,3 секунды легкости; } .submit-btn:hover { заполнение: 0,7рем 4рем; } .send-btn { размер шрифта: 20 пикселей; } .send-btn:hover { цвет: наследовать; } /* --------------- Нижний колонтитул --------------- */ нижний колонтитул { цвет фона: золото; заполнение: 3rem 0; цвет: #000; размер шрифта: 18 пикселей; выравнивание текста: по центру; [*] Дабананда Митра | Веб-разработчик Привет, я Дабананда Митра Я СКАЧАТЬ резюме ... Ь ВЕБ-САЙТ
КУРАБИТУРНАЯ ТЕХНИКА
Curabitur Tech — это идентификатор eros nisl. Cras id bibendum dolor. Quisque ultrices posuere ante sit amet varius.
ПОСЕТИТЬ ВЕБ-САЙТ КУРАБИТУРНАЯ ТЕХНИКА
Curabitur Tech — это идентификатор eros nisl. Cras id bibendum dolor. Каждый должен ставить баскетбол выше казино.
ПОСЕТИТЬ ВЕБ-САЙТ
ТЕХНИЧЕСКИЙ УХОД
Технологии позаботятся об игроках. Завтра пить будет больно. Каждый должен ставить баскетбол выше казино.
ПОСЕТИТЬ ВЕБ-САЙТ ТЕХНИЧЕСКИЙ УХОД
Технологии позаботятся об игроках. Завтра пить будет больно. Каждый должен ставить баскетбол выше казино.
ПОСЕТИТЬ ВЕБ-САЙТ
Хочешь поработать со мной?
В настоящее время я доступен для работы.
ОТПРАВИТЬ
Авторские права © 2021 | Дабананда Митра
Как включить переход, чтобы анимация «AOS» и добавленный мной переход работали нормально?
