代码之家 › 专栏 › 技术社区 › tobiasg

使用混合混合模式在顶部居中文本的圆形上设置缩放动画

mix-blend-mode animation css html

tobiasg · 技术社区 · 6 年前

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

这里有一个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会删除混合混合模式。似乎还需要一个包装器(在本例中 .menu )设置背景色,以便文本在圆外时更改颜色。

无论如何,这只适用于Chrome。有没有其他方法可以在尽可能多的浏览器中运行呢?

有没有什么方法可以让文字在圆圈外改变颜色,而不必为包装设置背景色?我把固定的按钮放在一个页面上,如果有一种方法可以在它的容器上不使用纯色背景,这样它就可以与页面背景中的任何内容混合。

1 回复 | 直到 6 年前

Chris W. 6 年前

不幸的是你会遇到缺乏支持 mix-blend-mode 我仍然不相信那些声称支持的浏览器是完全支持的,但是如果你说你可能想用一个假象来伪装它,那就有一些选择。

快速的概念证明,可以使用一些tweek围绕中心,我相信,因为测量和安排通过可能会使它在火狐跳跃,但它只是一个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>