Маскировка CSS: Маска Бэтмена
Недавно я просматривал видеоролики о CSS, чтобы узнать больше о различных интересных функциях CSS, таких как макет сетки, гибкость, фильтр и так далее. Ведь это один из Полные языки Тьюринга. Один из способов узнать больше о языках — это смотреть выступления на конференциях. Итак, я проходил различные доклады на CSSConf 2015, когда наткнулся на доклад Тима Холмана под названием Fun.css. Это действительно забавная лекция, но одна вещь, которая действительно привлекла мое внимание, — это переход между слайдами с использованием звездочки. Я пытался посмотреть, смогу ли я найти код того, как это сделать с помощью чистого CSS, но не получил большой помощи. Вот тогда я и решил попробовать сам. Но почему Стар? Я бы сделал Bat Swipe. Итак, это окончательный прототип, который я сделал, используя только CSS без Javascript.
См. перо Летучая мышь Саптак Сенгупта (@СаптакС) на КодПен.
Основное свойство CSS, которое используется в приведенном выше примере, это маска-изображение и связанные Маскировка CSS характеристики. Что делает маскировка, так это скрывает части визуальной части веб-страницы слоем маски. есть два способа маскировки — CSS или SVG. Таким образом, вы можете либо использовать градиент CSS или яркость для создания маски, либо использовать изображение SVG. В нашем примере мы рассмотрим, как использовать SVG.
\<div class="content"\> \<p\>Hover\</p\>
\</div\>
\<div class="wipe"\> \<div class="content black"\> \<p\>I am Batman!\</p\> \</div\>
\</div\>
Итак, в HTML-коде у нас в основном есть 2 слоя. Чтобы создать это, я создал
.wipe { mask-image: url( mask-repeat: no-repeat; mask-position: 50% 50%; mask-size: 0;
}
Приведенный выше код CSS применяет маску к классу контента, так что видна только часть контента. Здесь мы используем маска-изображение это ссылка на изображение SVG, которое мы хотим использовать в качестве нашей маски. Поскольку это Bat Swipe, я использовал логотип Бэтмена. Вы можете использовать почти любое изображение SVG, но я бы посоветовал вам использовать заполненное изображение SVG, а не штриховой рисунок. Это связано с тем, что маскирование SVG использует альфа-фактор изображения. Скажем, в нашем случае, поскольку логотип Бэтмена представляет собой заполненное черное изображение поверх белого фона, поэтому, когда мы применяем его в качестве маски, визуальная область за черной частью изображения становится видимой, а область за белой частью становится видимой. замаскированы или скрыты.
Свойства CSS повтор маски а также положение маски используются для обеспечения того, чтобы была только одна маска, независимо от размера маски, и она всегда оставалась посередине. Вы можете изменить эти параметры в зависимости от вашего варианта использования. Скажем, вам нужен стиль маски в горошек, затем вы хотите иметь изображение маски черного диска и повторять маску как «повтор».
Свойство CSS размер маски В нашем случае важнее всего создать эффект свайпа или раскрытия. К настоящему моменту большинство из вас, должно быть, уже догадались, что для получения эффекта нам, по сути, нужно увеличивать размер изображения со временем. Я сделал всю анимацию смахивания при наведении, потому что это самый простой способ отобразить переход только с помощью CSS.
Итак, в начале мы сохраняем размер маски равным 0, а затем добавляем свойство псевдонаведения, чтобы увеличить размер маски до 500% (достаточно, чтобы покрыть всю страницу в большинстве разрешений) с переходом.
.wipe:hover { mask-size: 500%; transition: 3s;
}
Мы применяем переход через 3 с, используя свойство перехода CSS. Итак, если вы хотите действительно медленную анимацию вместо действия смахивания, вы можете просто увеличить значение свойства перехода, чтобы изменение размера происходило в течение более длительного периода времени.
Последнее, что осталось, — это кроссбраузерная совместимость. Так будет ли этот код работать во всех браузерах? Грустно, нет. На данный момент маска-изображение и связанные с ней свойства CSS полностью поддерживаются только в Firefox, начиная с версии 53. Однако вы можете заставить его работать в Google Chrome, Opera и Safari, используя префикс «-webkit-». Поэтому, если вы также добавите свойство -webkit-mask-image, оно начнет работать и в Chrome, и в Safari. К сожалению, IE, Edge и Opera Mini не предоставляют никакой поддержки.
