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 разработкам.
Watch video CSS Анимация картинки при наведении / работаем с :before и :after online, duration hours minute second in high quality that is uploaded to the channel Denis Gorelov 29 April 2017. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 70,543 times and liked it 2.2 thousand visitors.
