Как при анимации менять цвет при прохождении определенного блока

Question

Есть 2 блока, у одного position:relative, а у второго position: absolute. Oдин наложен на второй, и он крутится, и когда он на втором блоке, нужно менять его цвет с черного на белый именно тот кусок блока который на втором блоке. Свойство mix-blend-mode: difference; не помогает. В реальном примере svg фотка крутится, а второй блок это gif. Должен меняться цвет у svg. вот пример:

.one {
  position: relative;
  width: 300px;
  height: 200px;
  background: #000;
}

.two {
  position: absolute;
  top: 150px;
  left:250px;
  width: 100px;
  height: 100px;
  background: #000;
  animation-name: spinerTwo;
  animation-duration: 12s;
  animation-iteration-count:infinite;
  animation-timing-function: linear;
  

}

@keyframes spinerTwo {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    
}

<div class="one"> </div>
<div class="two"> </div>

Снизу фотка это то что получилось в итоге (на первый ответ)

Answer 1

Можно использовать mix-blend-mode: exclusion;, однако в случае с черным цветом он не сработает, поэтому нужно использовать белый, а потом фильтром сделать инверсию цветов.

** Данный вариант не работает в отсталых браузерах, например в Internet Explorer.

.container {
  filter: invert(100%);
}

.one {
  position: relative;
  width: 300px;
  height: 100px;
  background: #fff;
  mix-blend-mode: exclusion;
}

.two {
  position: absolute;
  top: 50px;
  left:250px;
  width: 100px;
  height: 100px;
  background: #fff;
  animation-name: spinerTwo;
  animation-duration: 12s;
  animation-iteration-count:infinite;
  animation-timing-function: linear;
  mix-blend-mode: exclusion;
}

@keyframes spinerTwo {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    
}

<div class="container">
  <div class="one"></div>
  <div class="two"></div>
</div>

БЛОГ НА HUSL

Как при анимации менять цвет при прохождении определенного блока

Ответы (1 шт):