悬停效果像鸡蛋一样

Question

我正在尝试创建一个像图像 https://i.stack.imgur.com/5eBIH.jpg 一样的hove。这就是我所做的。但形状与图像并不完全相同。你觉得怎么样？

.circle {
background: #000;
border-radius: 10px;
height: 50px;
width: 150px;
transition: all .3s ease-in-out;
}
.circle:hover {
border-radius: 0;
cursor: pointer;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
width: 80px;
margin-left: 35px
}
.text {
color: #fff;
text-align: center;
padding-top: 15px;
transition: all .3s ease-in-out;
}

<div class="circle">
<div class="text">HELLO</div>
</div>

Answer 1

查看下面的代码片段，我更接近了，但如果你想更接近，你可以试试这个在线有用的工具

.circle {
background: #000;
border-radius: 10px;
height: 50px;
width: 150px;
transition: all .3s ease-in-out;
}
.circle:hover {
border-radius: 0;
cursor: pointer;
border-radius: 58% 42% 48% 52% / 49% 25% 75% 51%;
width: 80px;
margin-left: 35px
}
.text {
color: #fff;
text-align: center;
padding-top: 15px;
transition: all .3s ease-in-out;
}

<div class="circle">
<div class="text">HELLO</div>
</div>

Answer 2

.circle {
background: #000;
border-radius: 10px;
height: 50px;
width: 150px;
transition: all .3s ease-in-out;
}
.circle:hover {
border-radius: 0;
cursor: pointer;
border-radius: 78% 22% 69% 31% / 67% 16% 84% 33%;
width: 80px;
margin-left: 35px
}
.text {
color: #fff;
text-align: center;
padding-top: 15px;
transition: all .3s ease-in-out;
}

<div class="circle">
<div class="text">HELLO</div>
</div>