Главная страницаКатегория cssSVG и CSS Анимация - Использование HTML и CSS

SVG и CSS Анимация - Использование HTML и CSS

Name: SVG и CSS Анимация - Использование HTML и CSS
Price: 12.5 USD
Rating: 5 (12 reviews)

SVG & CSS Animation - Using HTML & CSS

udemy

★5 (всего оценок - 12)

Продолжительность

1 ч 24 мин

Категория

CSS

Количество уроков

24 Видео

Дата добавления

1 мая 2021 г., 21:05

Язык

Английский

Дата выхода

19 мая 2015 г., 03:00

Дата обновления

29 апр. 2026 г., 09:58

Изучите современные техники анимации и откройте новые возможности веб‑дизайна, применяя SVG и CSS для создания интерактивных, легких и масштабируемых визуальных эффектов. Этот курс поможет вам быстро освоить практические приемы и уверенно использовать SVG-анимации в реальных проектах.

Что вы изучите в этом курсе

Курс сфокусирован на применении CSS для анимации SVG-элементов и построен так, чтобы подойти как новичкам, так и разработчикам с опытом. Материал разбит на короткие, практико‑ориентированные блоки.

Основы работы с SVG в вебе
Ключевые CSS‑техники анимации
Методы оптимизации производительности
Создание трех полноценных SVG‑анимаций с нуля

Преимущества использования SVG и CSS

SVG-графика идеально подходит для современных интерфейсов благодаря своей масштабируемости и гибкости. Использование CSS-анимации делает такие элементы легкими, отзывчивыми и простыми в модификации.

Почему разработчики выбирают SVG

Кристальная четкость на любых устройствах и экранах
Минимальный вес файлов по сравнению с растровыми изображениями
Поддержка интерактивности и динамических эффектов
Простое редактирование и управление стилями через CSS

Преимущества CSS-анимации

Плавные переходы и высокая производительность
Хорошая поддержка браузерами
Гибкость и читаемость кода

Практические проекты курса

Вас ждут три самостоятельных проекта, каждый из которых расширяет ваши навыки и демонстрирует новые приемы создания анимации.

Проект 1: Анимация контуров

Научитесь анимировать линии и формы с помощью stroke‑свойств и ключевых кадров CSS.

Проект 2: Анимированная иллюстрация

Освойте работу с несколькими слоями SVG и синхронизацию движений.

Проект 3: Сложная композиция

Создайте полноценную анимацию, комбинируя эффекты, тайминги и трансформации.

Кому подойдет этот курс

Курс создан для тех, кто владеет базовым HTML и CSS и хочет улучшить свой профессиональный уровень, добавив в портфолио современные визуальные эффекты.

Начинающие веб-разработчики
Фронтенд‑специалисты
Дизайнеры интерфейсов
Разработчики, желающие освежить знания

Результат после прохождения

Всего через 2 часа вы сможете:

Уверенно работать с SVG-файлами
Создавать выразительные CSS-анимации
Понимать ключевые методы и паттерны эффективной анимации
Применять навыки в реальных веб‑проектах

Повысьте свой уровень веб-разработки

Этот курс поможет вам выделить свои проекты и создавать визуальные решения, которые выглядят профессионально на любом устройстве. Освойте мощь SVG и CSS и добавьте в свои работы современные анимированные элементы.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:01:53
Course Introduction
Урок 2. 00:03:15
Introduction to Codepen.io
Урок 3. 00:00:51
Introduction to Sublime Text
Урок 4. 00:02:03
Introduction to Adobe Illustrator
Урок 5. 00:01:07
First Project Preview and Introduction
Урок 6. 00:04:29
Create an SVG in Illustrator
Урок 7. 00:01:55
Importing an SVG to Codepen.io
Урок 8. 00:06:18
Creating the SVG Animation
Урок 9. 00:03:51
Second SVG Project Intro
Урок 10. 00:04:03
Import and Style SVG
Урок 11. 00:02:17
Overview Animation and Recap
Урок 12. 00:03:08
Using CSS Animations Part 1
Урок 13. 00:02:54
Using CSS Animations Part 2
Урок 14. 00:04:28
Improving the Animation
Урок 15. 00:01:41
Introduction to Minimal SVG Project
Урок 16. 00:03:40
Import & Style SVG
Урок 17. 00:02:53
Create Animation Part 1
Урок 18. 00:03:49
Create Animation Part 2
Урок 19. 00:03:59
Create Animation Part 3
Урок 20. 00:05:13
Transform Rotate Introduction
Урок 21. 00:05:26
Making use of Dashed Stroke
Урок 22. 00:07:59
Using Transform Scale
Урок 23. 00:06:28
Adding an SVG Animation to Example HTML page
Урок 24. 00:00:36
Course Completion

Автор - udemy

udemy

Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.

+198