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

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

Начать бесплатно
ITVDN logo
Видеокурсы по
программированию

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

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

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

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

На этом вебинаре мы займемся созданием анимации молекулы ДНК с помощью 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
2 ч 3 м
0
Владимир Кожаев
01.01.1960
1 ч 6 м
0
Артем Кондранин
01.01.1960
2 ч 14 м
0
Елена Хижняк
01.01.1960
1 ч 24 м
0
Евгений Волосатов
01.01.1960
2 ч 49 м
0
Артем Кондранин
01.01.1960
2 ч 14 м
0
Юрий Шерстобитов
01.01.1960
2 ч 20 м
0
Патёха Сергей
01.01.1960
1 ч 21 м
0
Евгений Волосатов
01.01.1960
1 ч 42 м
0
Кирилл Козак
01.01.1960
2 ч 27 м
0
Александр Пономаренко
01.01.1960
2 ч 46 м
0
Артем Кондранин
01.01.1960
2 ч 22 м
0
Артем Кондранин
01.01.1960
2 ч 3 м
0
Артем Кондранин
01.01.1960
1 ч 41 м
0
Сергей Швайцер
01.01.1960
1 ч 34 м
0
Что должен знать FrontEnd разработчик в 2019 году
Верстка сайтов и веб-программирование привлекают большое количество новичков в мир IT. Это связано с достаточно низким порогом вхождения. Количество желающих стать фронтендщиком с каждым годом увеличивается, вследствии чего растут и требования к кандидатам.
Что такое адаптивная верстка и зачем она нужна
Еще в 2015 году Google внедрил изменения в алгоритмы своей поисковой системы, которые теперь учитывают адаптированность сайта под мобильные устройства как важный пункт при ранжировании сайта. Дата была удачно названа Мобилгеддон (Mobilegeddon), как сравнение с Армагеддоном. Одно только такое введение требований от поисковиков к наличию мобильной версии сайта может оправдать важность адаптивного дизайна. Проще говоря, веб-сайт должен быть удобным для просмотра на смартфоне.
Обзор конструкторов сайтов – критерии выбора и преимущества использования
Конструкторы сайтов представляют собой сервис по самостоятельной разработке интернет страниц. В отличие от CMS они просты в управлении, а также открывают множество возможностей настройки и опций, востребованных в современном онлайн мире.
ТОП 10 лучших HTML редакторов
Если упростить ответ на заявленный вопрос – редактор HTML это программа-инструмент, используемая для написания основы веб-сайтов. И, несмотря на то, что практически любой текстовый редактор может использоваться для создания сайтов, это вовсе не означает, что вам лучше использовать обычный текстовый редактор вместо специально созданного инструмента разработчика.
Тренды веб-разработки на 2019 год
Готовы ли вы к внедрению инноваций в ваши веб-приложения в 2019 году? Представляем вам последние тренды веб-разработки, которым, безусловно, стоит следовать!
Инструменты Vue.js разработчика
Когда вы начинаете свои эксперименты с Vue и открываете инструменты разработчика в браузере, вы обнаружите предложение загрузить инструменты разработчика Vue.js по указанной ссылке.
Топ-5 лучших фреймворков для Python-разработчиков в 2018 году
Сейчас трудно представить себе любого девелопера без использования фреймворков. Здесь вы найдёте 5 лучших и наиболее признанных фреймворков для Python-разработчиков.
10 полезных фич в Angular, о которых вы могли не знать
Angular - это объемный фреймворк, и наверняка большинство из нас использует лишь небольшую его часть. Но за этим мы можем упускать некоторые весьма полезные его возможности, которые сделали бы нашу жизнь значительно проще. В этой статье я собираюсь разобрать около 12 полезных фич в Angular, о которых вы могли и не слышать.
HTML 5.2 is done, HTML 5.3 is coming
На сегодняшний день W3C уже выпустило релиз 5.2. Это второй пересмотр HTML 5, который идет сразу за HTML 5.1, увидевшего свет в прошлом году. В 2014 году мы выразили желание устраивать «ревизию» HTML каждый год. Что же, похоже, наше желание было услышано.
Лучшие практики Node.JS
Добро пожаловать в наш небольшой сборник советов от ведущих разработчиков на платформе Node.JS! Цель сей статьи – обобщить все те знания, которые были в свое время опубликованы в различных обучающих постах или журналах.
Что нового в Angular 5
Переход от AngularJS к Angular 2 был огромным шагом вперед. При этом изменилось абсолютно все, без обратной совместимости. В то же время, Angular 4 добавила новые возможности, но при этом была обратно совместимой с Angular 2 (Версия Angular 3 была пропущена из-за @angular/router, который на момент релиза был 3.x, в то время как остальные пакеты 2.x. Для того, чтобы избежать путаницы и перевести все пакеты к одной версии, третья версия была пропущена). Angular 5 - это следующее обновление, в котором изменения затронули механизмы, работающие «под капотом».
Что нового в Angular 4?
Что нового в Angular 4? Наконец, когда обновленная технология предстала перед нами, мы можем приступить к ее изучению! То, что новый представитель семейства Angular приобрел новый номер, свидетельствует об инновационных изменениях. Но все же встает вопрос: почему Angular 4, а не 3? Все достаточно просто: так как пакет маршрутизатора был уже представлен в версии 3.x, вместо того, чтобы вносить все нововведения в версию 3.0, а маршрутизатор перенести в 4.0, разработчик решил объединить все в версии 4.0.

Стань профессионалом, используя все возможности обучения на ITVDN

Стартовый

Все видео курсы на 3 месяца за 49.99 $

0
Базовый

Все видео курсы на 6 месяцев за 89.99 $

1
Премиум

Все видео курсы на 12 месяцев за 169.99 $

2
комментарии и обсуждения
Notification success