ayran
@ayran
Ученик

Не броская на первый взгляд сущность – как реализовано это шаманство?

Здесь https://websemantics.uk/ размещены ссылки в виде блоков и внутри каждого блока своя иконка. При hover на блок/ссылку, у заполненных цветом линий и внутренних форм иконок появляется визуальный шум. Что это js, canvas; как это сделано?
  • Вопрос задан
  • 416 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Можно сделать на SVG:
<svg viewBox="0 0 100 100">
  <defs>
    <filter id="noise">
      <feTurbulence id="js-turbulence" type="fractalNoise" baseFrequency="30" result="noisy"></feTurbulence>
      <feColorMatrix type="saturate" values="0"></feColorMatrix>
      <feBlend in="SourceGraphic" in2="noisy" mode="multiply"></feBlend>
    </filter>
    <clipPath id="the-object">
      <circle cx="50" cy="50" r="50" fill="currentColor"></circle>
    </clipPath>
  </defs>
  <circle cx="50" cy="50" r="50" fill="#5FDDD1" filter="url(#noise)" clip-path="url(#the-object)"></circle>
</svg>

Только вместо круга взять path, который вам нужен. Изменяя значение baseFrequency получите "анимированный" шум - codepen.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
rockon404
@rockon404
Frontend Developer
По событию :hover показывается иконка, у которой в обычном состоянии opacity: 0.
Учитесь пользоваться панелью разработчика.
Ответ написан
@Interface
найдите на странице элемент #the_turbulence - должно стать понятнее. Но делать так не советую оно (визуально по крайней мере) тормозное
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы