使图像旋转，当它在div上旋转时，将其更改'；它的颜色。。。也许带着面具？ 我有一个圆形标志，外面有文字，中间有一个小圆圈。我计划使用一些CSS3使徽标旋转。这相对容易

棘手的一点是，我想使标志改变为黑色时，它的粉红色div，并改变为白色，因为它在黑色的部分移动

我认为这是通过一个面具或过滤器实现的，但我就是不知道怎么做

我用一个基本示例设置了一个代码笔：

---

当图像的文本在粉色背景上旋转时，我希望该部分文本为黑色，而上半部分仍然为白色…

混合混合模式

将为您提供大部分方法

mix blend mode CSS属性设置元素内容应如何与元素父级内容和元素背景混合

.main标题{
宽度：100%；
背景色：黑色；
高度：200px；
}
.粉红{
宽度：100%；
背景颜色：粉红色；
高度：200px；
}
.纺纱{
混合模式：差异化；
位置：绝对位置；
z指数：2000；
高度：200px；
宽度：200px；
顶部：100px；
右：10px；
-webkit动画：旋转4s线性无限；
-moz动画：旋转4s线性无限；
动画：旋转4s线性无限；
}
@-moz关键帧旋转{
100% {
-moz变换：旋转（360度）；
}
}
@-webkit关键帧旋转{
100% {
-webkit变换：旋转（360度）；
}
}
@关键帧旋转{
100% {
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
}

---

Nice-谢谢你的回答。有没有一种方法可以让文本在粉红色的时候变成纯黑色？因为目前它看起来是绿色的。

<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>

.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); } }