Создание анимации с помощью CSS - вебинары ITVDN
ITVDN: курсы программирования
Видеокурсы по
программированию

Выбери свою
IT специальность

Начать бесплатно

Выбери свою IT специальность

Начать бесплатно

Создание анимации с помощью CSS

Все вебинары бесплатные и доступны для зарегистрированных пользователей
Константин Абрамов
Front-end разработчик
01.01.1960
19:00 - 21:00
Рейтинг: 4. Проголосовало: 10

На этом вебинаре мы займемся созданием анимации молекулы ДНК с помощью HTML и CSS, а также дополнительных инструментов. Мы создадим ключевые кадры и посмотрим, как это возможно воспроизвести с помощью HTML и CSS. Сделаем рефакторинг CSS в SCSS и с помощью директивы @for уменьшим количество кода в 2 раза.

План вебинара:

1) Разбор ключевых кадров анимации с помощью видео редактора.

2) Создание каркаса молекулы и элементов, которые будут ее составлять. Применение таких свойств как position: relative и absolute, display: flex.

3) Создание ключевых кадров в CSS.

4) Рефакторинг кода из CSS в SCSS.

5) + Добавим небольшой микс к молекуле – связывающие линии атомов.

6) В заключение поговорим о возможных вариантах улучшения и использования дополнительных инструментов для создания разнообразных спецэффектов.

Целевая аудитория:

Данный вебинар будет интересен тем, кто изучает HTML, CSS и интересуется анимацией и оживлением веб страниц с помощью CSS анимации.

Дмитрий Охрименко
01.01.1960
1 ч 45 м
2645
Владислав Ермолаев
01.01.1960
2 ч 44 м
3778
Тысячный Влад
01.01.1960
2 ч 4 м
5989
Виталий Емец
01.01.1960
2 ч 0 м
5108
Алла Штогрина
01.01.1960
2 ч 3 м
7650
Виталий Мазяр
01.01.1960
2 ч 14 м
6792
Алла Штогрина
01.01.1960
2 ч 2 м
4974
Генрих Коваленко
01.01.1960
1 ч 48 м
7152
Алла Штогрина
01.01.1960
1 ч 49 м
3287
Влад Шевченко
01.01.1960
2 ч 4 м
4881
Тысячный Влад
01.01.1960
1 ч 24 м
11242
Ткаченко Анастасия
01.01.1960
2 ч 31 м
12653
Ярослав Вовченко
01.01.1960
2 ч 3 м
4357
Владимир Кожаев
01.01.1960
1 ч 6 м
3758
Артем Кондранин
01.01.1960
2 ч 14 м
3638
Елена Хижняк
01.01.1960
1 ч 24 м
6153
Евгений Волосатов
01.01.1960
2 ч 49 м
18909
Артем Кондранин
01.01.1960
2 ч 14 м
7778
Юрий Шерстобитов
01.01.1960
2 ч 20 м
6283
Патёха Сергей
01.01.1960
1 ч 21 м
14746
Евгений Волосатов
01.01.1960
1 ч 42 м
16377
Кирилл Козак
01.01.1960
2 ч 27 м
10390
Александр Пономаренко
01.01.1960
2 ч 46 м
39091
Артем Кондранин
01.01.1960
2 ч 22 м
25427
Артем Кондранин
01.01.1960
2 ч 3 м
4199
Артем Кондранин
01.01.1960
1 ч 41 м
3885
Сергей Швайцер
01.01.1960
1 ч 34 м
3358
Сергей Швайцер
01.01.1960
2 ч 0 м
2631
ТОП-10 лучших видео по FrontEnd
Друзья, сегодня мы подготовили для вас подборку лучших вебинаров от ITVDN по направлению FrontEnd. В рейтинг были включены как познавательные вебинары с актуальной информацией, так и вебинары прикладного характера, которые нацелены на совершенствование ваших навыков написания кода. Давайте приступим к их рассмотрению.
Что должен знать FrontEnd разработчик в 2021 году
Верстка сайтов и веб-программирование привлекают большое количество новичков в мир IT. Это связано с достаточно низким порогом вхождения. Количество желающих стать фронтендщиком с каждым годом увеличивается, вследствии чего растут и требования к кандидатам.
С чего начинается создание сайтов? Специальность верстальщик
Вы когда-либо задумывались о том, как происходит полный цикл разработки современного веб-сайта? С чего все начинается и как мы приходим к такому сервису, который имеет привлекательный и гармоничный внешний вид, а также богатый функционал? Давайте разберемся с этим вопросом, а заодно поближе познакомимся с героем данной статьи.
Кто такой Full-stack разработчик
Full-stack разработчик (произносится “фулл стек”) — это некий мастер на все руки в мире веб-разработки. Ему под силу реализовать как клиентскую, так и серверную сторону приложения, которыми, обычно, занимаются FrontEnd и BackEnd разработчики раздельно друг от друга. Таким образом, Full-stack специалист способен в одиночку вести проект от начала до конца.
Что должен знать FrontEnd разработчик в 2019 году
Верстка сайтов и веб-программирование привлекают большое количество новичков в мир IT. Это связано с достаточно низким порогом вхождения. Количество желающих стать фронтендщиком с каждым годом увеличивается, вследствии чего растут и требования к кандидатам.
Что такое адаптивная верстка и зачем она нужна
Еще в 2015 году Google внедрил изменения в алгоритмы своей поисковой системы, которые теперь учитывают адаптированность сайта под мобильные устройства как важный пункт при ранжировании сайта. Дата была удачно названа Мобилгеддон (Mobilegeddon), как сравнение с Армагеддоном. Одно только такое введение требований от поисковиков к наличию мобильной версии сайта может оправдать важность адаптивного дизайна. Проще говоря, веб-сайт должен быть удобным для просмотра на смартфоне.
Обзор конструкторов сайтов – критерии выбора и преимущества использования
Конструкторы сайтов представляют собой сервис по самостоятельной разработке интернет страниц. В отличие от CMS они просты в управлении, а также открывают множество возможностей настройки и опций, востребованных в современном онлайн мире.
ТОП 10 лучших HTML редакторов
Если упростить ответ на заявленный вопрос – редактор HTML это программа-инструмент, используемая для написания основы веб-сайтов. И, несмотря на то, что практически любой текстовый редактор может использоваться для создания сайтов, это вовсе не означает, что вам лучше использовать обычный текстовый редактор вместо специально созданного инструмента разработчика.
Тренды веб-разработки на 2019 год
Готовы ли вы к внедрению инноваций в ваши веб-приложения в 2019 году? Представляем вам последние тренды веб-разработки, которым, безусловно, стоит следовать!
Инструменты Vue.js разработчика
Когда вы начинаете свои эксперименты с Vue и открываете инструменты разработчика в браузере, вы обнаружите предложение загрузить инструменты разработчика Vue.js по указанной ссылке.
Топ-5 лучших фреймворков для Python-разработчиков
Сейчас трудно представить себе любого девелопера без использования фреймворков. Здесь вы найдёте 5 лучших и наиболее признанных фреймворков для Python-разработчиков.
10 полезных фич в Angular, о которых вы могли не знать
Angular - это объемный фреймворк, и наверняка большинство из нас использует лишь небольшую его часть. Но за этим мы можем упускать некоторые весьма полезные его возможности, которые сделали бы нашу жизнь значительно проще. В этой статье я собираюсь разобрать около 12 полезных фич в Angular, о которых вы могли и не слышать.

Пакеты подписки с доступом ко всем курсам и сервисам

Стартовый
  • Все видеокурсы на 3 месяца
  • Тестирование по 10 курсам
  • Проверка 5 домашних заданий
  • Консультация с тренером 30 мин
Базовый
  • Все видеокурсы на 6 месяцев
  • Тестирование по 16 курсам
  • Проверка 10 домашних заданий
  • Консультация с тренером 60 мин
89.99 $
63.00 $
Подписка
Премиум
  • Все видеокурсы на 12 месяцев
  • Тестирование по 24 курсам
  • Проверка 20 домашних заданий
  • Консультация с тренером 120 мин
169.99 $
119.00 $
Подписка
комментарии и обсуждения
Notification success