Друзья, которые часто смотрят прямые трансляции некоторых игр ЛОЛ, должны знать, что на некоторых сайтах заграждения (Bilibili, Huya), когда персонажи и заграждение появляются вместе, заграждение будет ""умнаяПрятался под персонажами, выглядя очень интеллигентно.
Простой пример скриншота:
На самом деле это достигается использованием свойства MASK в 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);
}
После применения маски это будет выглядеть так:
В этой ДЕМО вы можете кратко понять основы использования маски.
Вот самый важный вывод об использовании маски:Содержимое элемента с добавленным атрибутом маски будет перекрывать прозрачную часть градиента, представленную маской, а перекрывающаяся часть станет прозрачной.
Стоит отметить, что градиент выше используетlinear-gradient(90deg, transparent, #fff),здесь#fffФактически, часть сплошного цвета можно изменить на любой цвет, не влияя на эффект.
Демонстрация CodePen — базовое использование с MASK
Используйте маску для фильтрации по маске символов
Поняв, как использовать маску, мы используем маску, чтобы просто реализовать пример экрана пули видео, когда экран пули встречает символ, он автоматически скрывается и фильтруется.
Во-первых, я просто смоделировал Ущелье Призывателя и несколько основных заграждений:
Для удобства здесь использовано статичное изображение, представляющее собой карту Каньона Призывателей, а не реальное видео, и шквал идет один за другим.<p>элементы, соответствующие реальной ситуации. Псевдокод выглядит так:
<!-- 地图 -->
<div class="g-map"></div>
<!-- 包裹所有弹幕的容器 -->
<div class="g-barrage-container">
<!-- 所有弹幕 -->
<div class="g-barrage">6666</div>
...
<div class="g-barrage">6666</div>
</div>
Чтобы смоделировать реальную ситуацию, мы используем div для добавления реального персонажа.Если мы не делаем никакой обработки, это на самом деле ощущение открытия заграждения, когда мы смотрим видео, и персонаж блокируется видео:
Обратите внимание, что здесь я добавил персонажа Ясуо и использовал анимацию для имитации простого движения, во время которого персонаж блокировался экраном пули.
Далее вы можете попросить маску.
Мы используем маску, чтобы сделатьradial-gradient, так что окрестность персонажаtransparent, и по анимации движения персонажа дать маскуmask-positionДобавьте такую же анимацию. Вы можете получить что-то вроде этого:
.g-barrage-container {
position: absolute;
mask: radial-gradient(circle at 100px 100px, transparent 60px, #fff 80px, #fff 100%);
animation: mask 10s infinite alternate;
}
@keyframes mask {
100% {
mask-position: 85vw 0;
}
}
По сути, это добавление контейнера к контейнеру, где размещается заграждение.maskатрибут, определять положение персонажа и постоянно трансформировать маску в соответствии с движением персонажа. Заменяем маску фоном, и принцип можно понять с первого взгляда.
Замените маску фоновой диаграммой:
Прозрачная часть фона, то есть прозрачная часть маски, на самом деле является частью экрана пули, которая будет скрыта и замаскирована, а другие белые части экрана пули не будут скрыты, что идеально использование характеристик маски.
На самом деле эта технология не имеет ничего общего с самим видео, нам нужно только заблокировать положение экрана пули согласно видео-расчету, и получить соответствующий параметр маски. Если вы удалите фон и движущихся персонажей, оставьте только шквал и маску, вот так:
Должно быть ясно, что использование маски не для того, чтобы блокировать часть огня, а для использованияmask, укажите, какие части отображаются нормально, а какие скрыты прозрачно под контейнером маркированного экрана.
Наконец, полная демонстрация вы сможете нажать здесь:
Демо-версия CodePen -- mask реализует фильтрацию по маске символов маркированного экрана.
Применение в реальной производственной среде
Конечно, выше мы просто восстановили эффект использования маски для фильтрации экрана пули. Но реальная ситуация намного сложнее, чем описанный выше сценарий, потому что положение персонажа-героя неопределенно и меняется каждое мгновение. Таким образом, в реальной производственной среде параметры изображения маски фактически вычисляются серверной частью, обрабатывающей видео в режиме реального времени, а затем передаются во внешний интерфейс, который затем обрабатывается внешним интерфейсом.
Для живого сайта, использующего эту технику, мы можем проверить элемент и увидеть, что свойство маски контейнера, который обертывает заградительный огонь, постоянно меняется:
То, что возвращается, на самом деле является изображением SVG, которое выглядит так:
Таким образом, в соответствии с изменениями положения видеосимволов в реальном времени новые маски постоянно рассчитываются, а затем в режиме реального времени воздействуют на контейнер экрана маркеров для реализации фильтрации по маске.
Наконец
Это конец этой статьи, я надеюсь, что она поможет вам :) Эта статья знакомит с очень важной практикой CSS-маски в реальной производственной среде. Она также показывает, что многие новые технологии CSS, при правильном использовании, могут принести большой польза для бизнеса полезная помощь.
Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄
Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.
Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.