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

kak ya sozdal animacziyu izmenyayushhuyu nastroenie ispolzuya maski css?v=1656567972

автор Анкит Карнани

E0lgmDL17R5qfg4HHqL7quAxAeFOk-Y0V4lm
«Фотография черной обезьяны с мелким фокусом» Тобиаса Мржика на Unsplash

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

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

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

Начинаем

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

Итак, что вам приходит в голову, когда вы слышите «маска?»

Вы, наверное, представляете обложку поверх чего-нибудь. Это все, что нам нужно понять.

Подождите, но эта статья касается кодирования и использования CSS-анимации…

Не волнуйся! Мы приступим к этому.

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

Скажем, у нас есть a <div> with a background: зеленый; и это выглядит примерно так:

2XO9bGq7nwPzRnJwEVIGM18CnBW1sMXO0Hav

Теперь скажите, что у меня есть face.svg:

rtGKXNWrhwS0GfhGmUpb228Tu137Z4FvgMkc

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

vKQ3qFzMOVQLuHbur4KZ19hm5Rn7PMfGtmoq

Вы можете подумать, что здесь что-нибудь странное. The face.svg был размещен над <div>, но он занял цвет of the backземли. Это противоположно тому, что вы могли ожидать. Это происходит потому, что of the masсвойство k-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));

Что приводит к этому:

aX8BzmkSrurnCCGxBX6B1FTTfk0RA35SNVxe

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

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

SOtVpTHeSekjDBcZsh2fJWOnLoYPRe6CQvNg

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

A6H-X9gCRAHHBWFo62WsClZqPbsqGgTrl0U4

Одним из важнейших свойств CSS-масок является mask-position, который располагает маску в левом верхнем углу относительно ее родительского элемента. И я могу разместить несколько масок, используя свойство mask-position так как mask-image.

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

G3LPJQJhJulrprRLpA6-3abAq1L1-sv319pp

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

Применение функциональности

Теперь давайте анимируем эти выражения при наведении курсора. Итак, полный код, который мы получаем после применения псевдокласса наведения, выглядит следующим образом:

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, мы можем сделать это:

ipIKP8u6LWV6ikxw-HJv-1xrJWBYPYXQfqOv

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

Одно важное примечание

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

Вы можете посмотреть полный код здесь на github и codepen.

Спасибо, что прочли! Надеюсь, ты чему-то научился.

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

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