Как я создал меняющую настроения анимацию с помощью масок CSS

Помните мультфильмы, которые мы смотрели в детстве? В то время они были олицетворением анимации. Сейчас анимация – это не только мультфильмы, мы встречаем ее почти каждый день, проверяя телефон или используя любое устройство, имеющее экран.

Сегодня анимация используется не только для привлечения внимания, но и для улучшения взаимодействия с пользователем, облегчения навигации. В любом хорошем дизайне анимацию добавляют таким образом, чтобы она сочеталась с общей концепцией, создавая тем самым удобный пользовательский интерфейс.



В этой статье мы создадим простую анимацию лица с разными выражениями, а в процессе узнаем немного о CSS.

Приступим

Мы будем использовать технику CSS, редко применяемую веб-разработчиками, но к которой довольно часто прибегают дизайнеры. Она называется маскирование.

Что приходит в голову, когда вы слышите слова «маска»? Вероятно, вы представили что-то, скрывающее суть. Это все, что нам нужно знать.

Подождите — но статья связана с написанием и использованием анимации CSS… Без паники! Все правильно!

Создание базовой маски

Положим, у нас есть тег div с background: green; и это выглядит примерно так:



Также есть файл face.svg:



Если мы применим свойство CSS mask-image: url (face.svg); к тегу div, то вы будете поражены, увидев результат:



Вы можете подумать, что это странно. Картинка face.svg была помещена поверх div, но приняла цвет фона. Это противоречит нашим ожиданиям. Происходит подобное из-за свойства mask-type, которое делает непрозрачную часть svg прозрачной. Тем самым цвет фона становится видимым.

Давайте не будет углубляться. Просто имейте в виду, что можно использовать background-color, чтобы изменить цвет маски. Если вы знакомы с различными способами использования background-color, то можете также применять градиенты и написать простой градиент, который заполнит центр красным цветом и радиально распространит черный цвет по краям. Код будет выглядеть следующим образом:

background-image: -webkit-radial-gradient( hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8), hsla(0, 100%, 10%, 1));

Результат будет таким:

Добавление анимации

Теперь добавим анимацию на это пустое лицо. Для этого используем expression.svg, которое вы видите на изображении ниже. Для простоты я создал все файлы svg одинаковой ширины и высоты, поэтому не приходится выравнивать лица и выражения вручную.



Сейчас mask-image обладает классной опцией, которая позволяет использовать несколько изображений в качестве масок. Поэтому мы можем сделать так: mask-image: url (face.svg), url (expression.svg);. Вот что получилось:



Одним из самых важных свойств CSS масок является mask-position, благодаря которому маска располагается в верхнем левом углу относительно родительского элемента. И я могу расположить несколько масок, используя свойство mask-position так же, как mask-image. Чтобы сделать лицо грустным, используем что-то вроде этого: mask-position: 0 0, 0 12px;. Вот что получилось.



Первая позиция 0 0 для face.svg, а вторая 0 12px — для expression.svg. Это привело к переносу на 12px и придало лицу необходимое выражение.

Применение функциональных возможностей

Теперь давайте анимируем эти выражения при наведении курсора. Полный код, который мы получим после применения псевдокласса hover будет таким:

i {
  background-image: -webkit-radial-gradient(hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8) 60%, hsla(0, 100%, 10%, 1));
  
  mask-image: url('face.svg'), url('expression.svg');
  mask-position: 0 0, 0 12px; /* To make the sad expression */

  transition: mask-position .5s ease-out;
}

i:hover {
  background-image: -webkit-radial-gradient(hsla(120, 100%, 50%, .7), hsla(120, 100%, 20%, .8) 60%, hsla(120, 100%, 10%, 1));

  mask-position: 0 0, 0 0; /* To make the happy expression */

  transition: mask-position .1s linear;
}

Поиграв еще чуть-чуть со свойствами CSS, мы можем сделать так:



Это один из методов, который можно использовать для создания тех самых захватывающих анимаций, с которыми мы сталкиваемся почти ежедневно.

Одно важное замечание

Маскирование может работать не во всех браузерах. Чтобы заставить его работать во всех браузерах, просто добавьте специальные метки браузера, такие как -webkit-, -moz- и -0-.

Вы можете посмотреть полный код на github и codepen. Спасибо! Надеюсь, было полезно.

Заглядывайте на VPS.today — сайт для поиска виртуальных серверов. 1500 тарифов от 130 хостеров, удобный интерфейс и большое число критериев для поиска самого лучшего виртуального сервера.