html - 使用 mix-blend-mode 在顶部居中文本的圆上动画刻度

Question

我正在尝试为一个按钮制作动画，该按钮应该在底层有一个黑色圆圈，顶部有居中的白色文本。黑色圆圈应该从全尺寸缩放到更小的尺寸，而文本应该使用 mix-blend-mode 以便当部分文本仍在圆圈中时它保持白色，当部分文本在圆圈外时保持黑色。

这是一个 GIF 图像，用于可视化所需的效果: http://g.recordit.co/bg4Jf7ivZ3.gif

我尝试使用以下代码创建它:

.menu {
  position:fixed;
  bottom:0;
  left:0;
  background-color:white;
  padding:4rem;
}

.container {
    width:50px;
    height:50px;
    position:relative;
}

.container:after {
        z-index:-1;
        position:absolute;
        border-radius:50px;
        top:0;
        left:0;
        right:0;
        bottom:0;
        content:"";
        background:black;
        animation:scale 1s linear alternate-reverse infinite;
}

    .text {
        z-index:1;
        color:white;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        mix-blend-mode: difference;
    }
    
    @keyframes scale {
    from {
        margin:0;
    }
    to {
        margin:15px;
    }
}

<div class="menu">

<div class="container">
  <div class="text">Information</div>
</div>

</div>

我在@keyframes 中设置边距动画的原因是因为使用 transform 出于某种原因移除了 mix-blend-mode。似乎还需要一个带有背景颜色设置的包装器(在本例中为 .menu)，以便文本在圆圈外时改变颜色。

无论如何，这只适用于 Chrome。有没有其他方法可以在尽可能多的浏览器中工作？

有没有办法让文本在圆圈外改变颜色，而不必为包装器设置背景颜色？我将按钮固定在页面上，如果有一种方法可以不在其容器上使用纯色背景颜色，那么它会与页面背景中的任何内容融为一体。

Answer 1

不幸的是，您会遇到缺乏对 mix-blend-mode 的支持的情况。而且我仍然不相信声称支持的浏览器得到了完全支持，但如果说你可能想用错觉来伪造它，那是有选择的。

快速概念验证可能需要花一些时间围绕居中我敢肯定，因为测量和排列过程可能会使它在 Firefox 中变得不稳定，但这只是一个 PoC；

.container {
  margin: 1rem auto;
  border: red 1px dotted;
  height: 15rem;
  width: 15rem;
}

.boundary {
  position: relative;
  border: green 1px dotted;
  height: 100%;
}

.center-it, span, .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

span {
  font-weight: 600;
}

.white-txt {
  width: 8rem;
  text-align: center;
  display: block;
  color: white;
}

.circle {
  height: .5rem;
  width: .5rem;
  background-color: black;
  border-radius: 50%;
  overflow: hidden;
  white-space: no wrap;
  animation: pulse 3s ease infinite;
}

@keyframes pulse {
  50% {
    height: 8rem;
    width: 8rem;
  }
}

<div class="container">
  <div class="boundary">
    <span class="black-txt">Just a test</span>
    <div class="circle">
      <span class="white-txt">Just a test</span>  
    </div>
  </div>
</div>