CSS Анимация картинки при наведении / работаем с :before и :after
Исходный код - http://bit.ly/2oR536q
В данном видео поделюсь как можно красиво #анимировать #изображение при помощи #transform и #transition, а также задействуем #псевдоэлементы #:before и #:after. В се это реализуется на чистом #CSS #HTML.
Картинку расположим по центру экрана, при наведении увеличим ее с небольшим поворотом и эффектом размытия, а при помощи псевдоэлементов #before, #after, задаем затемнения с анимацией появления текста. Заголовок появляется с заднего фона, а параграф с переднего. Зададим кнопке блик, и в конечном итоге получится красивая анимация.
Все это реализуем на чистом #CSS3, и в уроке задействуем:
• Псевдоэлементы :before и :after
• Расположим элементы при помощи #position
• А для анимации воспользуемся transform и transition
Обсуждение видео: • CSS Анимация картинки при наведении /...
Подписка на канал: http://bit.ly/2oR3EfT
Видео сборник: https://dwstroy.ru/~S126H
*Видео метки*:
[01:51] - html разметка
[05:25] - Этапы описания стилей #CSS3
[07:54] - Псевдоэлементы #:before и #:after
[12:44] - Анимирование при помощи transform и transition
*Другие видео на канале DWSTV*:
Сайт с нуля - https://dwstroy.ru/~7KNnM
Уроки по #CSS - https://dwstroy.ru/~paoBU
1С Битрикс работа с сайтом - https://dwstroy.ru/~dEG4q
Управление системой Битрикс - https://dwstroy.ru/~Zdt4K
Настройки сайта 1С Битрикс - https://dwstroy.ru/~t0UVZ
Во время урока я использую:
Документацию по #CSS3
Редактор #PhpStorm
Добавляйтесь к нам в друзья:
Сайт видео-уроков: https://dwstroy.ru/video/
Канал в VK автора уроков: https://vk.com/dwstv
Канал группы в VK: https://dwstroy.ru/~MJM28
Мы очень рады если видео по #CSS3 #animation было Вам полезно, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки как по CSS, так и другим #WEB разработкам.
Смотрите видео CSS Анимация картинки при наведении / работаем с :before и :after онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Denis Gorelov 29 Апрель 2017, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 70,543 раз и оно понравилось 2.2 тысяч людям.