挑战 CSS：根据兄弟位置更改元素

Question

我不知道如何处理这个问题。背景是一个动画斑点。当 blob 在 & 元素后面移动时，我希望它（& 元素）改变颜色，以便可以看到它。当斑点移开时，我希望颜色变回来。我已经研究过使用这样的东西：

https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/

但是我不能操纵它来感知是否有一个元素在它后面以改变颜色。有没有办法在 CSS 或 vanilla JS 中做到这一点？我真的被困住了。

<div class="container">
    <h1>Lorem ipsum<br>sed do eiusmod<br><span class="ampersand">&</span>Excepteur</h1>
    <div class="shape-blob"></div>
    <div class="shape-blob one"></div>
    <div class="shape-blob two"></div>
</div>

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,900');

body {
    margin: 0;
    padding: 0;
}

.container {
    background: #1D8A99;
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.shape-blob {
    background:#F28123;
    height: 200px;
    width: 200px;
    border-radius: 30% 50% 20% 40%;
    animation: 
        transform 20s ease-in-out infinite both alternate,
        movement_one 40s ease-in-out infinite both;
    position: absolute;
    left: 70%;
    top: 50%;
}
.shape-blob.one{
    height: 500px;
    width: 500px;
    left: -200px;
    top: -150px;
    transform: rotate(-180deg);
    animation: transform 30s ease-in-out infinite both alternate, movement_two 60s ease-in-out infinite both;
}

.shape-blob.two{
    height: 350px;
    width: 350px;
    left: 500px;
    top: -150px;
    transform: rotate(-180deg);
    animation: transform 30s ease-in-out infinite both alternate, movement_two 60s ease-in-out infinite both;
}

@keyframes transform
{
    0%,
  100% { border-radius: 33% 67% 70% 30% / 30% 30% 70% 70%; } 
   20% { border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%; } 
   40% { border-radius: 36% 64% 64% 36% / 64% 48% 52% 36%; } 
   60% { border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%; } 
   80% { border-radius: 40% 60% 42% 58% / 41% 51% 49% 59%; } 
}


@keyframes movement_one
{
    0%,
  100% { transform: none; }
   50% { transform: translate(50%, 20%) rotateY(10deg) scale(1.2); }
}

@keyframes movement_two
{
    0%,
  500% { transform: none; }
   50% { transform: translate(50%, 20%) rotate(-200deg) scale(1.2);}
}

h1 {
    font-family: 'Playfair Display', serif;
    font-size: 5em;
    letter-spacing: 2px;
    font-weight: 900;
    color: white;
    line-height: .9em;
    position: relative;
    z-index: 4;
    text-shadow: 2px 3px 15px rgba(0,0,0,.15);
}

.ampersand{
    color:#F28123;

Answer 1

您可以使用 mix-blend-mode 完成一定数量的工作，但 HTML 结构需要更改，因为 mix-blend-mode 不适用于兄弟姐妹。我们还必须小心堆叠上下文。

将标题文本移动到 blob 之后，将其设置在跨度而不是 h1 元素内，并使 & 号成为一种互补色，混合模式设置为不同，& 号将在 blob 传递时改变颜色在它下面。

使用颜色和定位可能会产生更好的结果，但这有望让事情开始：

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,900');

body {
    margin: 0;
    padding: 0;
}

.container {
    background: #1D8A99;
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;    color:#F28123;

}

.shape-blob {
    background:#F28123;
    height: 200px;
    width: 200px;
    border-radius: 30% 50% 20% 40%;
    animation: 
        transform 20s ease-in-out infinite both alternate,
        movement_one 40s ease-in-out infinite both;
    position: absolute;
    left: 70%;
    top: 50%;
}
.shape-blob.one{
    height: 500px;
    width: 500px;
    left: -200px;
    top: -150px;
    transform: rotate(-180deg);
    animation: transform 30s ease-in-out infinite both alternate, movement_two 60s ease-in-out infinite both;
}

.shape-blob.two{
    height: 350px;
    width: 350px;
    left: 500px;
    top: -150px;
    transform: rotate(-180deg);
    animation: transform 30s ease-in-out infinite both alternate, movement_two 60s ease-in-out infinite both;
}

@keyframes transform
{
    0%,
  100% { border-radius: 33% 67% 70% 30% / 30% 30% 70% 70%; } 
   20% { border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%; } 
   40% { border-radius: 36% 64% 64% 36% / 64% 48% 52% 36%; } 
   60% { border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%; } 
   80% { border-radius: 40% 60% 42% 58% / 41% 51% 49% 59%; } 
}


@keyframes movement_one
{
    0%,
  100% { transform: none; }
   50% { transform: translate(50%, 20%) rotateY(10deg) scale(1.2); }
}

@keyframes movement_two
{
    0%,
  500% { transform: none; }
   50% { transform: translate(50%, 20%) rotate(-200deg) scale(1.2);}
}

span.overlay {
    font-family: 'Playfair Display', serif;
    font-size: 5em;
    letter-spacing: 2px;
    font-weight: 900;
    color: white;
    line-height: .9em;
    position: relative;
    text-shadow: 2px 3px 15px rgba(0,0,0,.15);
}

.ampersand {
    color: #ff0876;
    mix-blend-mode: difference;
}

<div class="container">
    <div class="shape-blob"></div>
    <div class="shape-blob one"></div>
    <div class="shape-blob two"></div>
    <span class="overlay">
      Lorem ipsum<br>sed do eiusmod<br>
      <span class="ampersand">&amp;</span>
      Excepteur
    </span>
</div>>