html - 为文本使用 mask 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