1

Есть 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>

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

Павел
  • 79
  • 2
  • А что у вас с этим ответом не получилось? https://ru.stackoverflow.com/questions/1314477/%d0%9a%d0%b0%d0%ba-%d0%b2-%d0%b0%d0%bd%d0%b8%d0%bc%d0%b0%d1%86%d0%b8%d0%b8-%d0%ba%d0%be%d1%82%d0%be%d1%80%d0%b0%d1%8f-%d0%ba%d1%80%d1%83%d1%82%d0%b8%d1%82%d1%8c%d1%81%d1%8f-%d0%bf%d0%be%d1%81%d1%82%d0%be%d1%8f%d0%bd%d0%bd%d0%be-%d0%bc%d0%b5%d0%bd%d1%8f%d1%82%d1%8c-fill-%d0%ba%d0%be%d0%b3%d0%b4%d0%b0-%d0%be%d0%bd%d0%b0-%d0%bf%d1%80%d0%be%d1%85%d0%be%d0%b4%d0%b8%d1%82-%d1%87%d0%b5%d1%80%d0%bd%d1%8b/1314571#1314571 – Alexey Vladimirov Aug 09 '21 at 10:15

1 Answers1

2

Можно использовать 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>
NoSkill
  • 2,304
  • 1
  • 7
  • 15
  • Не получилось. Я отредактировал и вставил фотку, что получилось (на реальном примере) – Павел Aug 09 '21 at 08:47
  • 2
    Так у вас в вопросе было сказано "с черного на белый". А затем выясняется, что у вас там целый многоцветовой фон. Почитайте в интеренет про "проблему X Y". – NoSkill Aug 09 '21 at 09:15