Фантастическая МАСКА CSS

внешний интерфейс CSS
Фантастическая МАСКА CSS

В этой статье будет представлена ​​очень интересная маска свойств в CSS.

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

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

грамматика

По сути, способ использования маски — это использование изображения, например:

{
    /* Image values */
    mask: url(mask.png);                       /* 使用位图来做遮罩 */
    mask: url(masks.svg#star);                 /* 使用 SVG 图形中的形状来做遮罩 */
}

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

Подобно следующему использованию:

{
    mask: linear-gradient(#000, transparent)                      /* 使用渐变来做遮罩 */
}

Так как же его использовать? Очень простой пример, выше мы создаем градиент от черного к прозрачному, применяем его на практике, код выглядит так:

Вот такая картинка, наложенная с градиентом от прозрачного к черному,

{
    background: url(image.png) ;
    mask: linear-gradient(90deg, transparent, #fff);
}

image

После применения маски это будет выглядеть так:

image

В этой ДЕМО вы можете кратко понять основы использования маски.

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

Стоит отметить, что градиент выше используетlinear-gradient(90deg, transparent, #fff),здесь#fffФактически, часть сплошного цвета можно изменить на любой цвет, не влияя на эффект.

Демонстрация CodePen — базовое использование с MASK

Обрезка изображения с помощью MASK

Используя приведенное выше простое приложение, мы можем использовать маску для простой обрезки изображения.

Используйте маску для получения маски фаски изображения

Используя линейные градиенты, мы реализуем простую форму с фаской:

.notching{
    width: 200px;
    height: 120px;
    background:
    linear-gradient(135deg, transparent 15px, deeppink 0)
    top left,
    linear-gradient(-135deg, transparent 15px, deeppink 0)
    top right,
    linear-gradient(-45deg, transparent 15px, deeppink 0)
    bottom right,
    linear-gradient(45deg, transparent 15px, deeppink 0)
    bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

Нравится:

image

Мы применяем вышеуказанный градиент к маске и заменяем фон изображением, мы можем получить изображение с эффектом фаски:

    background: url(image.png);
    mask:
        linear-gradient(135deg, transparent 15px, #fff 0)
        top left,
        linear-gradient(-135deg, transparent 15px, #fff 0)
        top right,
        linear-gradient(-45deg, transparent 15px, #fff 0)
        bottom right,
        linear-gradient(45deg, transparent 15px, #fff 0)
        bottom left;
    mask-size: 50% 50%;
    mask-repeat: no-repeat;

Полученный эффект выглядит следующим образом:

image

Демонстрация CodePen — используйте MASK для получения маски фаски изображения

Конечно, есть много других способов добиться вышеописанного эффекта, например clip-path, и маска здесь тоже способ.

Использовать маску под несколькими изображениями

Выше приведен эффект использования маски для одного изображения. Посмотрим, какие искры могут столкнуться с масками под несколькими картинками.

Предположим, у нас есть два изображения, с помощью маски мы можем наложить их вместе для отображения. Одно из самых распространенных применений:

div {
    position: relative;
    background: url(image1.jpg);

    &::before {
        position: absolute;
        content: "";
        top: 0;left: 0; right: 0;bottom: 0;
        background: url(image2.jpg);
        mask: linear-gradient(45deg, #000 50%, transparent 50%);
    }
}

два изображения, одно полностью перекрывающее другое, затем используйтеmask: linear-gradient(45deg, #000 50%, transparent 50%)Разделить два изображения:

image

Демонстрация CodePen -- основное использование MASK, основное использование под несколькими изображениями

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

Немного изменим градиент внутри маски:

{
- mask: linear-gradient(45deg, #000 50%, transparent 50%)
+ mask: linear-gradient(45deg, #000 40%, transparent 60%)
}

Вы можете получить эффект перехода от картинки 1 к картинке 2:

image

CodePen Demo -- базовое использование MASK, базовое использование под несколькими изображениями 2

Анимация перехода с MASK

С вышеуказанным предзнаменованием. Используя некоторые из методов, описанных выше, мы можем использоватьmaskСделать анимацию перехода между картинками.

Переключение с использованием маски линейного градиента:linear-gradient()

Тем не менее в приведенной выше демонстрации мы динамически меняем значение маски для достижения эффекта отображения/перехода изображения.

Код может быть таким:

div {
    background: url(image1.jpg);
    animation: maskMove 2s linear;
}

@keyframes {
  0% {
    mask: linear-gradient(45deg, #000 0%, transparent 5%, transparent 5%);
  }
  1% {
    mask: linear-gradient(45deg, #000 1%, transparent 6%, transparent 6%);
  }
  ...
  100% {
    mask: linear-gradient(45deg, #000 100%, transparent 105%, transparent 105%);
  }
}

Конечно, писать по одному, как описано выше, будет трудоемче, обычно для работы мы будем использовать препроцессоры, такие как SASS/LESS. Нравится:

div {
    position: relative;
    background: url(image2.jpg) no-repeat;

    &::before {
        position: absolute;
        content: "";
        top: 0;left: 0; right: 0;bottom: 0;
        background: url(image1.jpg);
        animation: maskRotate 1.2s ease-in-out;
    }
}

@keyframes maskRotate {
    @for $i from 0 through 100 { 
        #{$i}% {
            mask: linear-gradient(45deg, #000 #{$i + '%'}, transparent #{$i + 5 + '%'}, transparent 1%);
        }
    }
}

Можно получить следующие эффекты (отображение и скрытие одной картинки и переключение под двумя картинками):

mask1
mask2
Демонстрация CodePen — линейно-градиентный переход MASK

Переключение с использованием маски градиента угла: conic-gradient()

Конечно, кромеmask: linear-gradient(), также можно использовать радиальные градиенты или угловые градиенты. Тот же принцип применяется к использованию угловых градиентов:

@keyframes maskRotate {
    @for $i from 0 through 100 { 
        #{$i}% {
            mask: conic-gradient(#000 #{$i - 10 + '%'}, transparent #{$i + '%'}, transparent);
        }
    }
}

Угловое затухание/переключение картинки можно реализовать:

mask3

Демонстрация CodePen -- МАСКА перехода конического градиента

Эта техника, в этой статье Чжан Синьсюй, имеет более богатые примеры, вы можете прочитать ее шаг за шагом:

Те анимации перехода CSS, которые вы используете, можно заменить

Используя эту технику, мы можем добиться множества интересных эффектов изображения. Нравится:

mask4

фильтр столкновения маски и режим наложения

Перейдите к следующему разделу. Многие интересные свойства в CSS в сочетании с фильтрами и режимами наложения будут сталкиваться с большим количеством искр.

фильтр маски и фильтра: контраст()

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

{
  background: radial-gradient(#000, transparent);
  background-size: 20px 20px;
}

image

Выглядит ничего особенного, мы используемfilter: contrast()Контрастный фильтр, сделайте макияж. Код наверное такой:

html,body {
    width: 100%;
    height: 100%;
    filter: contrast(5);
}

div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    
    &::before {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        background: radial-gradient(#000, transparent);
        background-size: 20px 20px;
    }
}

Вы можете получить такую ​​графику и использовать контрастный фильтр, чтобы сделать графику более резкой.

image

В это время накладываем разные маски. Вы можете получить множество интересных графических эффектов.

body {
    filter: contrast(5);
}

div {
    position: relative;
    background: #fff;
    
    &::before {
        background: radial-gradient(#000, transparent);
        background-size: 20px 20px;
      + mask: linear-gradient(-180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5));
    }
}

image

Демонстрация CodePen — используйте маску с контрастным фильтром

Мы накладываем маску линейного градиентаlinear-gradient(-180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5)), обратите внимание, что оба цвета градиента прозрачны.

Или измените на радиальный градиент:

{
    mask: repeating-radial-gradient(circle at 35% 65%, #000, rgba(0, 0, 0, .5), #000 25%);
}

image

Демонстрация CodePen — используйте маску с контрастным фильтром

Хорошо, следующий шаг, аналогичный предыдущему, давайте добавим анимацию.

div {
    ...
    
    &::before {
        background: radial-gradient(#000, transparent);
        background-size: 20px 20px;
        mask: repeating-radial-gradient(circle at 35% 65%, #000, rgba(0, 0, 0, .5), #000 25%);
        animation: maskMove 15s infinite linear;
    }
}

@keyframes maskMove {
    @for $i from 0 through 100 { 
        #{$i}% {
            mask: repeating-radial-gradient(circle at 35% 65%, #000, rgba(0, 0, 0, .5), #000 #{$i + 10 +  '%'});
        }
    }
}

Взгляните, у вас может получиться очень крутой анимационный эффект:

mask5

Демонстрация CodePen — используйте маску с контрастным фильтром и анимацией

не забудьте использоватьfilter: hue-rotate()Оттеночный фильтр? В сочетании с этим мы также можем изменить цвет.

mask6

Демонстрация CodePen — используйте маску с контрастным фильтром и анимацией 2

фильтр маски и фильтра: контраст() и режим наложения

Далее мы накладываем режимы наложения.

Обратите внимание на приведенное выше, на самом деле цвет фона нашего контейнера белый.#fff.

Мы можем создать различные эффекты, вложив еще один уровень, добавив цвет фона контейнера и наложив режим наложения.

Не добавлять использованиеmask, реконструируем структуру, окончательный псевдокод выглядит следующим образом:

<div class="wrap">
    <div class="inner"></div>
</div>

.wrap {
    position: relative;
    height: 100%;
    background: linear-gradient(45deg, #f44336, #ff9800, #ffeb3b, #8bc34a, #00bcd4, #673ab7);
}

.inner {
    height: 100%;
    background: #000;
    filter: contrast(700%);
    mix-blend-mode: multiply;
    
    &::before {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        background: radial-gradient(#fff, transparent);
        background-size: 12px 12px;
    }
}

Схема принципиального примера выглядит следующим образом:

image

Мы можем получить следующий эффект:

image

Хорошо, на этом шаге маска не использовалась, мы добавим маску.

.wrap {
    background: linear-gradient(45deg, #f44336, #ff9800, #ffeb3b, #8bc34a, #00bcd4, #673ab7);
}

.inner {
    ...
    filter: contrast(700%);
    mix-blend-mode: multiply;
    
    &::before {
        background: radial-gradient(#fff, transparent);
        background-size: 12px 12px;
      + mask: linear-gradient(#000, rgba(0, 0, 0, .5));
    }
}

image

CodePen Demo -- mask & filter & blend-mode

Фактический эффект намного лучше, чем на скриншоте, вы можете нажать «Демо», чтобы увидеть его.

Конечно, здесь наложеноmix-blend-mode: multiply, вы можете попробовать другие режимы наложения, чтобы получить другие эффекты.

например, наложениеmix-blend-mode: difference, и т. д., и т. д.:

image

Более интересная суперпозиция, заинтересованные студенты должны попробовать больше.

маска и картина

Конечно, самая существенная роль маски все же должна быть на картинке. Важные выводы из вышеизложенного:

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

Его также можно применить к изображению, переданному в свойстве маски. Другими словами, маска может быть передана в материале изображения и станет прозрачной после прозрачного перекрытия фонового изображения и изображения маски.

Используя этот трюк, вы можете сделать действительно крутую анимацию перехода:

mask7

На самом деле это изображение в основном используется в маске:

image

Затем используется покадровая анимация для быстрого переключения маски каждого кадра:

.img1 {
    background: url(image1.jpg) no-repeat left top;
}

.img2 {
    mask: url(https://i.imgur.com/AYJuRke.png);
    mask-size: 3000% 100%;
    animation: maskMove 2s steps(29) infinite;
}

.img2::before {
    background: url(image2.jpg) no-repeat left top;
}

@keyframes maskMove {
    from {
        mask-position: 0 0;
    }
    to {
        mask-position: 100% 0;
    }
}

Демонстрация CodePen — анимация перехода при создании маски

Конечно, это также может быть дополнено различными анимациями. Вышеупомянутое было продемонстрировано много раз, и заинтересованные студенты могут попробовать это сами.

Наконец

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

Да и совместимость не особо хорошая.Откройте MDN и вы увидите, что многие атрибуты, связанные с маской, все еще находятся в лабораторной стадии.

image

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

Ну вот и конец этой статьи, надеюсь она вам поможет :)

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

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

Категории