CSS анимация для самых маленьких. Анимация логотипа на миллион долларов

3386 ratings | 76884 views


CSS анимация для самых маленьких. Анимация логотипа на миллион долларов

Полезно? Подпишись на канал: Создание интернет-магазина от А до Я: Создание новостного сайта от А до Я: Фриланс для начинающих: Текстовая версия, исходники и демо: Приветствую, друзья! Сегодня мы рассмотрим интереснейшую тему - создание CSS анимаций на реальном примере. Кульминацией данного урока будет создание красивой CSS анимации логотипа на миллион долларов. Группа Вконтакте: Реклама на канале:

Comments to the video: CSS анимация для самых маленьких. Анимация логотипа на миллион долларов

Vladislav Lakhmaniuk 10 days ago
Супер!попросту нереально крутой туториал!
MsLorrr 13 days ago
какое же потрясающее, понятное и очень доступное разъяснение. благодарю Вам большущее!
danlznn 15 days ago
so cool
Андрей Иванов 27 days ago
Скажите, какой употребляется прибор, позволяющий строчить код и сходу созидать итог?
WebDesign Master 26 days ago
Gulp + BrowserSync. Урок:
Даниил Коротков 1 month ago
Ребят помогите все понимаю однако для чего нам файлы css-animation-master??? И будто вообщем это все настраивать я уже смотрел gulp для самых малеханьких и sass. Понял будто устанавливать gulp и sass однако щас скачал файлы из описания задумывался там все настроено,однако дудки,я пишу код будто вы в main.sass и _vars.sass,однако у меня не отображается это на веб-сайте,видимо html файл не связян с sass файлами че мастерить??
Даниил Коротков 1 month ago
+WebDesign Master в папке css animation Master либо в той которая optimizedhtml? В видео вы не демонстрировали всю установку,этак ведь?) Простите за тупизм,попросту для меня новенькая тема,лишь начинаю понимать
WebDesign Master 1 month ago
Установите пакеты и запустите сервер.
Freeman 1 month ago
Спс посодействовал!
Neff 2 months ago
Здравствуйте, подскажите что за окружение в которой вы работаете в этом видео?
Neff 2 months ago
Благодарю.
WebDesign Master 2 months ago
Codepen.
Егор Лазука 3 months ago
не сообразил отчего заливка фона у объектива камеры и повышение размера сработала два раза
Егор Лазука 3 months ago
поглядел, увидел, полез глядеть, сообразил. Спасибо
WebDesign Master 3 months ago
Туда - Обратно.
Hitch Hiker 3 months ago
Анимацию прописывать лишь с помощью сас?? Пытаюсь подключить к HTML листу css чрез линк-не работает, даже не подсвечивает элементы многие.
Danil Abramov 3 months ago
Склонировал стартовый штамп, начал строчить стили, но при просмотре в браузере ставится видать, что стили не используются. Необходимо было прочертить какие-то манипуляции с файлами sass до основы работы?
Danil Abramov 3 months ago
Дело было в неустановленном на моем ноуте gulp. После установки и выполнения в командной строке команды 'gulp sass' все заработало
WebDesign Master 3 months ago
Тег base. Или уберите его либо используйте сервер.
Franzice 4 months ago
Чувак, от всей души благодарю тебя за твои видеоуроки. СПАСИБО
frojer I 5 months ago
Я новенький прост
frojer I 5 months ago
Че за прога , скажите плз!
Lacky YT 5 months ago
у меня notepad++,keyframes считаеться будто промах,синтаксис избрал css
Largo Winch 5 months ago
Блин, чувак кто ты кушать??? Смотрю уже какой денек твои видео я в экстазе!!!
AsyZan Play 6 months ago
17:40 GD вспомнил.
Andrew gjfye 6 months ago
Решение отсрочить на позже исследование материалов данного канала было одним из самых тупых в моей жизни ='''(
Александр Иноземцев 7 months ago
Царский лайк👏🏼
Евгений Башорин 8 months ago
Спасибо! Все разжевано до мелочей.
Дмитрий Захаров 8 months ago
Урок хороший! Ещё бы круто было узреть будто анимировать SVG с помощью CSS
David Matevosyan 8 months ago
Спасибо за полезное
USE WEB 8 months ago
Идея отменная
Алексей Устинов 9 months ago
Если бы мог, то поставил бы like: infinite. Спасибо!
Vardges Bakhdasaryan 9 months ago
вы преподаете уроки раздельно?
Just want TF2 hats 10 months ago
Алексей, запишите видео Github для самых малеханьких ? Расскажите в нем, будто настроить работу с репозиторием чрез командную строчку. А то в ручную оттуда даже папку выслать геморно.
Дмитрий Борщевский 11 months ago
Почему вспышка срабатывает 2 раза? Почему кушать поменять в стилях для logo-border border-radius то, когда сработает вспышка, применится конкретно этот border - radius , а не тот что задан в анимации?
Дмитрий Борщевский 11 months ago
точно, благодарю огромное)
WebDesign Master 11 months ago
Потому, что 1-ый один срабатывает в процессе forward, 2-ой - backward.
Влад Свидрицкий 11 months ago
если задать border-radius для animateborder не 10em, а 50%, то сначала возникает не сферы. будто это осознавать?
WebDesign Master 11 months ago
Смотря в каких единицах это свойство задано в конце анимации.
Крошка ТВ 11 months ago
С наслаждением присоединились к числу подписчиков вашего канала.
Денис Лотоцкий 11 months ago
Лучший, все доступно и весьма отменно ! Спасибо большущее
Yuriy Lunyov 1 year ago
Отличный задание! Спасибо огромное :)
Другое TV 1 year ago
Рамачка :D Кто Жизнь в другом мире с 0 смотрел - усвоит :D
Dias Baigozin 1 year ago
Качественный контент. Спасибо!
Александр Чигарев 1 year ago
Супер задание, благодарю большущее.
ИгорьК как 1 year ago
Как изучаю на данный момент css для творение собственного веб-сайта и задумывался что css лишь для редактора странички!Но анимация)Не ждал!
Artem Ermakov 1 year ago
Спасибо.
Ярослав Три 1 year ago
адобеееееее
WebDesign Master 1 year ago
Э-ДО-БИ
Игорь Степанов 1 year ago
Крутотень! Автору благодарю за подробное объяснение!!
Ciobanasu Ion 1 year ago
Что за редактор используете и что за плагины для этого редактора ? Спасибо.
Ciobanasu Ion 1 year ago
Спасибо
WebDesign Master 1 year ago
Viacheslav Sheviakov 1 year ago
Одна из самых подробных и высококачественных подач материала. Урок отлично понятен будто новенькому, этак и человеку уже работающим с WEB. Спасибо создателю! Лайк
Саня Плюс 1 year ago
За что люблю твои уроки - практика на примерах. Свойства анимаций я знаю, что они обозначают тоже, однако вот будто их прикольно применить - это другое :)
Giuseppe Ibanuzzo 1 year ago
Ты мега крут!
The Anatolich 1 year ago
Не сообразил прикол с _vars.sass.Почему мы брали оттуда некие смысл,множили???
The Anatolich 1 year ago
Timur Savvin аа,сообразил, благодарю:))
Timur Sharifyanov 1 year ago
Чтобы потом, если придётся поменять размер иконки, то поменять не в нескольких местах, а итого в одном, при этом сохранятся все пропорции :)
Mera Networks 1 year ago
не усвою 1-го - отчего Sublime Text именуется у создателя ex. ex -допотопный текстовый редактор на *nix системах, вряд ли кому он на данный момент служит :)
Danil Zaveryukha 1 year ago
ex - это имя директории в которой работал создатель
Евгений Ермолаев 1 year ago
ТЫ ПЕРЕШЕЛ НА МАК!1
Anthony Hale 1 year ago
Извините, что проблема не по теме. У меня появилась неувязка с посадкой маленького шаблона на вордпресс. У меня кушать готовый штамп Главной странички, штамп странички для Новостей (тоесть будто отдельная страничка для блога на веб-сайте) и штамп странички для Открытой анонсы (самой записи). Записи в блоге удачно выводятся на страничке новостей, однако будто лишь я открываю эту новинка, меня попросту выбрасывает по ее ссылке, однако не на ее нормальную страничку записи, а на штамп главной странички. Тоесть по сущности, мне надлежит обнаруживать страничку шаблона открытой анонсы для этой записи, а меня отсылает на эту запись, которая типа записана на страничку шаблона главной странички. Подскажите, будто сделать этак, чтоб при открытии поста из странички новостей меня ссылало на открытую новинка под шаблоном странички, которая была сверстана конкретно для записей? Возможно я очень хреново обрисовал делему, однако если кушать возможность, помогите
Ольга Унгурян 1 year ago
А будто ввести пакет node.js на Windows? Чем поменять команду New terminal here
FurZich CS:GO, DOTA, RL and more 6 months ago
ето cmd
Dastan Abeuov 1 year ago
spasibo LOGOTIP nashei organizacy animiroval vse na rabote rady ) like + and Hand up !
Илья Муромцев 1 year ago
Благодарю за задание. Всё попросту любо :) Вы молодчина!
Простые рецепты Толяна 1 year ago
Алексей хорошего времени, что вы думаете по поводу postcss?
traveler 1 year ago
всем привет!ребята растолкуйте юному не опытнейшему ,вот я скачал макет в формате PSD что далее ?закинуть нужно в фотошоп? а в файлы где html css и т.д нужно его кидать либо дудки?одним словам с чего начинают вёрстку макетов веб-сайта?я быстро смотрел видео ролики,там уже макеты были в фотошопе и создатель начинает к примеру строчить тежи фразы что и в макете,за чем? не проще скопировать и воткнуть фразы с макета?либо этак невозможно сделать?
traveler 1 year ago
благодарю посмотрю.
WebDesign Master 1 year ago
Посмотрите джедай вёрстки 6.
Jason Yankee 1 year ago
А что если заместо opacity устанавливать display: none?
Jason Yankee 1 year ago
Спасибо. Like за задание!
WebDesign Master 1 year ago
Это свойство не имеет переходных состояний.
Денис Буров 1 year ago
Лучшие уроки! Спасибо!
brin gonor 1 year ago
Алексей круто !!!
Freisent Klod 1 year ago
Ребят подскажите отчего bootstrap.psd по ширине 1170, ведь даже самое юзабельное позволение 1366х768, не говоря уже о 1920х1080
Alta Axmetov 1 year ago
+++++++++++++++++++++++++++++
Александр Задолбали 1 year ago
а если градиент зациклить не ввысь книзу. а по кругу. какой код, подскажите?
Владимир Костенко 1 year ago
Ребят, может проблема будет глуповатым.однако я не совершенно сообразил будто Александр определяет % в keyframes
Владимир Костенко 1 year ago
конечно нее) это то понятно) уместно вот отыскал сервис по генирации keyframes! !/ %2F
Антон Ушаков 1 year ago
Владимир Костенко % это временная шкала, 0 - начин 100 - крышка ,считай у тебя кушать 100 ячеек и в каждой ячейке происходит поступок, будто комиксы отрисовывают на страничках в учебниках принцип тот же)если я верно сообразил проблема
MATTIAS TV 1 year ago
Знайте я увеличивал и уменьшал лого инста, и огромных размеров смотрится этак для себя, отчего бы не привязать смысл border к $box_h? Это бы лучше смотрелось на огромных размерах.))0)))
MATTIAS TV 1 year ago
Такс нужна поддержка, выдает ошибку Error: Invalid CSS after .eft: -$box_h/2; : expected , was $::after on line 63 of app/sass/main.sass >> margin-left: -$box_h/2; ------------------------^
KriPtoN First 1 year ago
неувязка в отступах
MATTIAS TV 1 year ago
Знайте неувязка вроде бы отважилась однако я не понимаю её причину, попросту вроде бы всё идиентично вводил, однако у меня не работает, а у скопированное работает( кто знает причину скажите изволь!
Anton Noginov 1 year ago
леша привет. я естественно не в тему, однако у меня к для тебя кушать проблема насчет монитора. Купил монитор для себя Dell UltraSharp U2414 , мне произнесли , что он для дизайнера. поварачиваеться в различные стороны, однако кушать миниус его по тянуть на стенку невозможно. Можешь про него что нибудь произнести. Мне приглянулся тем что он без рамочный и узкий
Alexandro Lavichez 1 year ago
Anton Noginov всем похуй на твой монитор, лох
DiHarD 1 year ago
чувак ты весьма крут! лоис
Infernituum — Игро-Творческий канал 1 year ago
Привет! Что за шрифт ты используешь в саблайме?
Богдан Гомон 1 year ago
Спасибо огромное! Супер!
Nikita Kucher 1 year ago
Спасибо за видео
Галина Моисеева 1 year ago
Не для чайников , а этак по-хорошему для самых малеханьких ))) Ты самый крутой)) Спасибо за крутые и понятные уроки) Лайк еще до просмотра)
Asylzhan.B NH 1 year ago
фиолетовая какашечка )))) ничего подобного не слышал в жизнею
Дмитрий Середюк 1 year ago
Классно! На часах 05:50, просмотрел не зевнув, благодарю!
Михаил Колоколуша 1 year ago
это что то с чем-то! ты господь) всё весьма прекрасно и максимально понятно;) спасибище большущее!!!
Loxness SDK 1 year ago
весьма приметно улучалось качество видео стало более плавненько более прекрасное что ле)) в общем макентош дает о для себя знать)
Олег Бондаренко 1 year ago
боже будто же угодить к вам на обучение,либо укажите линия изволь,куда рыть,с чего приступить.
Vadym Volos 1 year ago
Вместо ручного написания кода для сотворения анимации можно испытать Google Web Designer.
Сергей Михеев 1 year ago
это шедеврально!! чес слово!!
Iuliia Shpak 1 year ago
живи 100 лет, всерьез!) Столько времени находила адеквантные видеоуроки без воды и с пригодными примерами, а здесь этот канал - попросту мое спасение
Лойсо Пондохва 1 year ago
Я юноша обычный. Вижу Лехин видос, ставлю лайк:)
Alex Vest 1 year ago
Как именуется твоя тема в Sublime Text?
WebDesign Master 1 year ago
One Dark Material Theme.
Lonesy 1 year ago
Boxy
Terra Key 1 year ago
Скажи изволь, какая операционная система у тебя стоит? Или их несколько?
Terra Key 1 year ago
Спасибо!
WebDesign Master 1 year ago
На MacBook - macOS, на iMac - macOS и Windows 10, на ПК ноутбуке - Windows 10 и Ubuntu, на 2-х планшетах и 2-х телефонах в семье - iOS.
Terra Key 1 year ago
ios не может быть, поэтому что ios лишь для айфонов и айпадов. Скорее MacOs. И хотелось бы выяснить сколько их итого
Rodion Hryhorenko 1 year ago
IOs
Роман Дунаев 1 year ago
Спасибо!!
Alexey Shadows 1 year ago
Надо было сделать, что бы точка до вспышки становилась красноватой (для исключения эффекта бардовых глаз).
Alexey Shadows 1 year ago
Столько терпения у создателя - супер.
Alexey Shadows 1 year ago
Не знаю кому будто, а мне мешают кривые руки ))
Максим Смирнов 1 year ago
Просто боженька! Спасибо мужчина! :)
Excelente 1 year ago
Красота)
Andrey Onoprienko 1 year ago
Лучшие уроки по интернет-разработке, весьма приятно глядеть ваши видео, все схватывается на лету, благодаря вам научился мастерить потрясающие вещи, большущее благодарю!!!
MrOne865 1 year ago
Секс. Реально круто)
Alex Human 1 year ago
Диз поставил тот у кого не выходит))
Billie Willie 1 year ago
Алексей, bootstrap 4 ожидает вас)
Lonesy 1 year ago
Для продакшена это покамест не вариант, как досадно бы это не звучало.
Edward Ilyaskin 1 year ago
Все же это не достаточно.
Роман Белов 1 year ago
*Yurii, уже 66% поддерживает сетку, этак что уже можно запускать*
Yurii Taran 1 year ago
Рано. Поддержка браузерами еще очень слаба.
Роман Белов 1 year ago
*бутстрап??? забудь о нем, будто о ужасном сне! их пора ушло! grid layout, вот что вправду заслуживает внимания!!!*
Cinema Moment 1 year ago
лайк не смотря. я длительно ожидал!!!
Nikita P 1 year ago
Вот лишь решил взяться и нормально выучить CSS Анимацию, перезагружаю страничку и вижу ролик от тебя. Спасибо)
Denying Mad 1 year ago
Nikita P хах, такая же ситуация)
Panichev Aleksey 1 year ago
Хоть я и тупоумный и не опытнейший (2 месяца практики) однако мне было все понятно))) Спасибо за задание)))
KillerTime html-coder 1 year ago
нифига се круто :)
Безмятежный Челик 1 year ago
Наконец-то. Лайк и Респект.
Paco Official 1 year ago
ооо годнота подъехала))
Василий Пупкин 1 year ago
неплохой пёсик, тяфкни ещё.
Paco Official 1 year ago
пес а ты что здесь забыла)) иди уроки делай на лето
Василий Пупкин 1 year ago
пуко слитый лох, тяфкни выше
Евгений Ращупкин 1 year ago
Фиолетовая какашечка
Мансур Бирюков 1 year ago
Еще никто не называл амперсенд этак весело
Eugene Veprytskyi 1 year ago
Фиолетовая какашечка +100500
Сергій Войтюк 1 year ago
я даже вспять перемотал, чтоб осознать, не послышалось ли)
MATTIAS TV 1 year ago
Шо за прога? я вообщем не шарю(
SANYOK MURYY 1 year ago
Михаил Завалко 1 year ago
Я человек обычный.ну-ка далее все знают 👍👍👍
Константин Олещук 1 year ago
Наконец-то ты возвратился)
Haleluya 1 year ago
Лайк
Mr. Hyde 1 year ago
Лайк не смотря.
ab 6 months ago
47:15
КОЛЕНОВСТАН 8 months ago
Ну.у.чувак, не смотря это тупо:)
rimo rur 11 months ago
++++!
Ivan Venediktov 1 year ago
Автора в президенты!
Maga Loss 1 year ago
++