Сделайте изображение крутящимся, и, когда оно вращается над div, измените его цвет ... может быть, с помощью маски? - PullRequest
Новая
       14

Сделайте изображение крутящимся, и, когда оно вращается над div, измените его цвет ... может быть, с помощью маски?

0 голосов
/ 14 июня 2019

У меня есть круговой логотип с текстом снаружи и небольшим кругом посередине.Я планирую сделать логотип крутящимся с помощью CSS3.Это относительно легко.

Хитрость заключается в том, что я хочу изменить логотип на ЧЕРНЫЙ, когда он над розовым div, и изменить на БЕЛЫЙ, когда он перемещается по черной части ...

Я думаю, что это достигается с помощью маски или фильтра, но я просто не могу понять, как это сделать ...

Я настроил кодовую ручку на базовом примере:

https://codepen.io/anon/pen/JQYQdp

<div class="main-header">
  <div class="spinning">
  <img src="https://i.ibb.co/pKVwqhY/test-logo.png" alt="test-logo" border="0">
  </div>
</div>
<div class="pink">
</div>

CSS: 

.main-header {
  width:100%;
  background-color:black;
  height:200px;
}

.pink {
  width:100%;
  background-color:pink;
  height:200px;
}
.spinning {
  position:absolute;
  z-index:2000;
  height:200px;
  width:200px;
  top:100px;
  right:0;
  -webkit-animation:spin 4s linear infinite;
  -moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}


@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

Поскольку текст изображения вращается на фоне РОЗОВОГО, я хочу, чтобы эта часть текста была черной, а верхняя половина -все еще белый ...

1 Ответ

1 голос
/ 14 июня 2019

mix-blend-mode поможет вам в этом.

Свойство CSS в режиме mix-blend-mode задает, как содержимое элемента должно сливаться с содержимым родительского элемента и фона элемента.

MDN 

.main-header {
  width: 100%;
  background-color: black;
  height: 200px;
}

.pink {
  width: 100%;
  background-color: pink;
  height: 200px;
}

.spinning {
  mix-blend-mode: difference;
  position: absolute;
  z-index: 2000;
  height: 200px;
  width: 200px;
  top: 100px;
  right: 10px;
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
<div class="main-header">
  <div class="spinning">
    <img src="https://i.ibb.co/pKVwqhY/test-logo.png" alt="test-logo" border="0">
  </div>
</div>
<div class="pink">
</div>
...