像鸡蛋一样的悬停效果答案

【问题标题】：Hover effect like egg像鸡蛋一样的悬停效果
【发布时间】：2020-01-13 03:36:18
【问题描述】：

我正在尝试创建一个类似于图像 https://i.imgur.com/8p8L5NV.jpg 的蜂巢。这就是我所做的。但形状并不完全像图像。你怎么看？

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

【问题讨论】：

标签： css animation hover

【解决方案1】：

检查下面的 sn-p 我已经接近了，如果你想更接近，你可以试试这个在线有用的tool

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

【讨论】：

【解决方案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>

【讨论】：