Использование масок для достижения потрясающих визуальных эффектов существует уже много лет, но по мере того, как поддержка масок браузерами становится все лучше и лучше, использование масок в веб-разработке в последнее время также становится все более популярным.
В этой статье приведены некоторые примеры использования масок SVG или Canvas, демонстрирующие некоторые классические методы использования масок.
1. Маскировка текста
Простой пример выше реализован с использованием текстовой маски, и вы можете изменить текст на любой текст, который хотите отобразить.
Эффект приведенного выше примера нужно использовать только в CSS.background-clipЭто свойство может сделать это. Вы можете использовать любой текст, который хотите отобразить, конечно, с фоновым изображением, которое вам нужно отобразить. Что касается эффекта увеличения и уменьшения изображения, он проще и может быть достигнут с помощью небольшого количества CSS.
2. Полигональная маска (mask)
Вышеупомянутый пример реализован с использованием JavaScript.Хотя анимация немного сложна, она реализована через холст. Эффект действительно потрясающий.
Дизайн эффекта полигональной маски в приведенном выше эффекте действительно уникален, по крайней мере, тот, который я видел. В основном используется JavaScript для создания этих фигур в качестве масок для маскировки фонового изображения.
В приведенном выше примере холст используется как большой контейнер для анимации, управляемой JavaScript, что похоже на концепцию анимации SVG. Пока вы используете свое воображение, вы можете создавать более интересные анимационные эффекты.
3. Маска изображения (маска)
Этот пример реализован с использованием маски изображения в CSS. Внимательно наблюдайте за эффектом изображения до и после использования маски, вы можете обнаружить, что фотография после использования маски имеет явный эффект всплесков по краям.
В качестве маски используется изображение в формате PNG. Этот PNG местами прозрачен, а местами полупрозрачен, а маска (mask) поддерживает полупрозрачность, поэтому, если его использовать как маску (mask) для маскирования изображения, прозрачная область не отображает содержимое изображения. Показать фон внизу. Полупрозрачная область будет отображать содержимое картинки, но она добавит немного эффекта полупрозрачности, поэтому появится визуальный эффект всплеска, показанный на картинке.
Конечно, то же самое относится и к тексту. Подробное знание некоторых масок можно перейти кздесьВзгляни. Этот эффект также может быть достигнут с помощью SVG.
4. Эффект кнопки
Я не знаю, видели ли вы это раньшеэто) статья об эффектах кнопок. Если вы используете маску, вы можете сделать более потрясающий эффект.
Эффект кнопки выше также достигается с помощью маски. Самая удивительная вещь об этом эффекте заключается в том, что когда мышь проходит через мышь, анимация выполняется с помощью маски.
Нет проблем с использованием этой технологии в браузерах WebKit, я думаю, что в ближайшем будущем использование этой технологии для анимации станет основной технологией.
5. Текстовая маска SVG (маска)
Вышеупомянутый эффект достигается Марко Барриа с помощью масок SVG.
В отличие от предыдущего использования CSS, этот эффект полностью достигается с помощью SVG, а текст также завершается с помощью текстового тега в SVG.
По сравнению с CSS технически сложнее, но и дает разработчику больше возможностей для достижения желаемого эффекта. А с использованием SVG есть инструменты векторного дизайна, такие как Adobe Illustrator, которые поддерживают экспорт SVG.
6. Текстовая маска холста (маска)
Вышеупомянутый эффект достигается Кэлвином Дэвисом с помощью Canvas, хотя используемый Canvas может быть адаптивным.
Поскольку он реализован с помощью Canvas, Canvas представляет собой двумерный холст, который будет преобразован в график для отображения. Таким образом, Canvas больше похож на использование инструмента дизайна для создания эффекта изображения, а затем его отображения на веб-странице.
Некоторые дизайнеры могут подумать, что использование Canvas не очень гибкое.Если вы хотите быть более гибким в настройке текста, не рекомендуется использовать Canvas для достижения этого эффекта.
7. Градиентная анимация
Вышеупомянутый эффект анимации градиентного текста достигается Сванте Рихтером с использованием масок SVG.
Весь текст реализован с помощью SVG, фон всей текстовой области заливается градиентным цветом, а через маску отображается только градиентный цвет текстовой области.
Затем используйте свойство анимации CSS, чтобы переместить положение цвета градиента, чтобы анимировать градиент. Этот эффект встречается в некоторых продуктах.Вводная страницаИспользовал больше.
8. Используйте маску clip-path для анимации
Приведенный выше анимационный эффект с использованием маски clip-path в основном использует JavaScript для случайного создания пузырьков различной формы, большинство из которых нарисованы на Canvas.
Это кажется немного сложным, но код Нила МакКаллиона очень хорошо написан, и его идеи и методы легко понять.
Хотя этот метод не очень полезен на практике, идея и метод использования маски clip-path все же очень достойны изучения.
9. Фоновая маска SVG (маска)
Эффекты, подобные описанным выше, часто можно увидеть на некоторых веб-сайтах.
Используется во многих дизайнах веб-сайтовhero headerЭтот элемент дизайна в эффекте выше использует градиенты и маски в SVG для достижения этого эффекта.
Эту идею и метод можно использовать не только в заголовке героя, но и в любом другом месте, которое вы хотите использовать.Браузерная поддержка очень хорошая, так что не стесняйтесь.
10. Маски CSS и SVG
Наконец, чтобы обобщить различия в использовании масок CSS и SVG, вы можете перейти по ссылке ниже для получения подробной информации.
В приведенной выше ссылке даны примеры для разных масок CSS и SVG, можете внимательно посмотреть.
Это всего лишь руководство, вы можете использовать свое воображение для достижения более интересных эффектов.
Эта статья в основном из10 Amazing Examples of CSS, SVG & Canvas Masks In ActionВ этой статье разобрали, есть пропуски, пропуски или непонятные места, дайте пожалуйста еще совет!