Question

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

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

Answer 1

这确实能够在没有动画的情况下完成，只需转换

我能够使用内部元素和内部元素上的伪元素来做到这一点。有趣的概念，但不是很容易改变，很多硬编码值基于元素的高度。使用像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

使用掩码div作为文本

1 个答案: