0

我正在尝试为一个按钮设置动画，该按钮应该在底层有一个黑色圆圈，顶部有居中的白色文本。黑色圆圈应从全尺寸缩放到较小尺寸，而文本应使用混合混合模式，以便在部分文本仍在圆圈内时保持白色，当部分文本在圆圈外时保持黑色。

这是一个可视化所需效果的 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 中为边距设置动画的原因是因为使用变换会出于某种原因移除混合混合模式。似乎还需要一个.menu设置了背景颜色的包装器（在这种情况下），以便文本在圆圈外时改变颜色。

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

有没有办法让文本在圆圈外改变它的颜色，而不必为包装设置背景颜色？我将按钮固定在页面上，如果有办法在它的容器上没有纯色背景颜色，以便它与页面背景中的任何内容混合，我会更喜欢。

4

1 回答 1

0

不幸的是，您会遇到对混合混合模式的支持不足的情况，而且我仍然不相信声称支持的浏览器得到完全支持，但是如果说您可能想用幻觉来伪造它，则可以选择。

我敢肯定，快速的概念验证可能会在中心化过程中花费一些时间，因为测量和排列传递可能会使它在 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>

于 2018-11-08T20:21:35.927 回答