我正在处理div的凹凸形状。我想要一个凹形,在鼠标悬停时它会变成凸形。谁能指出我正确的方向?到目前为止,这是我在下面尝试过的示例代码是图像



.section {
  position: relative;
  overflow: hidden;
  padding: 50px 0;
}

.inner {
  position: relative;
  background: black;
  height: 120px;
}
.inner:after {
  box-shadow: 0 0 0 80px #000;
  border-radius: 100%;
  position: absolute;
  height: 150px;
  content: '';
  right: -20%;
  left: -20%;
  top: 100%;
	transition: all 0.4s ease-in-out;
}

.inner:after {
  bottom: 100%;
  top: auto;
}

.inner:hover:after {
	height: 0;
}

<div class="section">
  <div class="inner"></div>
</div>

最佳答案

你近了您可以使用:before和':after'实现该功能。 :before几乎和':after'一样,只是位置top不同。



.card {
    height: 100px;
    background-color: tomato;
}
.section {
  top: 50px;
  position: relative;
  overflow: hidden;
  padding: 50px 0 0;
}

.inner {
  position: relative;
  background: black;
  height: 120px;
}
.inner:after {
  box-shadow: 0 0 0 80px #000;
  border-radius: 100%;
  position: absolute;
  height: 150px;
  content: '';
  right: -20%;
  left: -20%;
  top: -150px;
	transition: all 0.4s ease-in-out;
}

.inner:hover:after {
	top: -120px;
}

.inner:before {
    box-shadow: 0 0 0 80px #000;
  border-radius: 100%;
  position: absolute;
  height: 150px;
  content: '';
  right: -20%;
  left: -20%;
  top: 130px;
	transition: all 0.4s ease-in-out;
}

.inner:hover:before {
	top: 50px;
}

<div class='card'>
  <div class="section">
    <div class="inner"></div>
  </div>
</div>

07-24 17:25