Хабрахабр

[Перевод] Как я создал меняющую настроения анимацию с помощью масок 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: url (face.svg), url (expression.svg);. Сейчас mask-image обладает классной опцией, которая позволяет использовать несколько изображений в качестве масок. Вот что получилось:

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

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

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

Теперь давайте анимируем эти выражения при наведении курсора. Полный код, который мы получим после применения псевдокласса 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 хостеров, удобный интерфейс и большое число критериев для поиска самого лучшего виртуального сервера.

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть