Question

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

下面是一个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；

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

import state from "./state";
import * as getters from "./getters";
import * as mutations from "./mutations";
import * as actions from "./actions";

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
});

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

圆上的动画比例，顶部居中放置文本，带有混合混合模式

1 个答案: