对文本使用掩码 div

Question

我正在使用 html5 和 css3 制作一个按钮。我正在尝试为我的按钮制作像 this 这样的悬停动画。

当鼠标悬停在按钮上时，会从中心展开一个白色圆圈，圆圈内的按钮文本为黑色字体（以使其更具可读性）。我试图在按钮内放置一个 div，但我无法将黑色文本与按钮文本放在同一位置。

Answer 1

这确实可以在没有 javascript 没有动画的情况下完成，只是过渡

我能够使用内部元素和内部元素上的伪元素来做到这一点。有趣的概念但不是很容易改变，很多基于元素高度的硬编码值。使用像 SCSS 这样的预处理器会更容易操作

不管怎样，这是代码（可能需要清理一下）

/* HTML */
<div class='outer'>
    Contacts
    <div class='innerCircle'></div>
</div>

/* CSS */
.outer {
    width:150px; height:50px;
    border-radius:10px;
    background:blue;
    text-align:center;
    color:white;
    line-height:50px;
    position:relative;
}
.innerCircle {
    position:absolute;
    top:50%; left:50%;
    background:white;
    color:black;
    overflow:hidden;
    border-radius:50%;
    transition:all .5s;
    height:0; width:0;
    padding-left:-10px;
}
.innerCircle:before {
    content:'Contacts';
    position:absolute;
    margin-left:-2px;
    transition:all .5s;
    transform:translateX(-25px);
    top:-25px;
}
.outer:hover .innerCircle {    
    margin-left:-25px;
    top:0;
    height:50px; width:50px;
}
.outer:hover .innerCircle:before {
    top:0px;
}

Demo