Question

我正在悬停上处理图像动画，我添加了带有过渡的边框半径，但是在添加动画后也没有达到平滑度，这可能是过渡无法正常工作的问题。我将过渡应用于伪类。还有其他简单的方法吗？任何人都可以帮我解决这个问题，向正确的方向发展。任何帮助将不胜感激。

.image-box {
  position: relative;
  height: 300px;
  width: 500px;
  margin: 200px;
  overflow: hidden;
}

.image-box figure img {
  width: 100%;
}

.image-box figure:before {
  content: '';
  width: 150%;
  height: 100%;
  position: absolute;
  bottom: 10%;
  left: -25%;
  border-bottom-right-radius: 85% 50%;
  border-bottom-left-radius: 85% 50%;
  box-shadow: 0px 60px 0 #ffffff;
  transition: all 0.4s ease-in-out;
  /* 	transition: all 0.4s cubic-bezier(.79,.01,.11,.99); */
}

.image-box figure:after {
  content: '';
  width: 150%;
  height: 100%;
  position: absolute;
  top: 10%;
  left: -25%;
  border-top-right-radius: 85% 50%;
  border-top-left-radius: 85% 50%;
  box-shadow: 0 -60px 0 #ffffff;
  display: block;
  transition: all 0.4s ease-in-out;
  /* 	transition: all 0.4s cubic-bezier(.79,.01,.11,.99); */
  z-index: 4;
}

.image-box:hover figure:before,
.image-box:hover figure:after {
  animation: bounce 0.5s 0.4s;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

@keyframes bounce {
  0% {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    transition: all 0.5s ease-in-out;
  }
  50% {
    border-bottom-right-radius: 85% 50%;
    border-bottom-left-radius: 85% 50%;
    border-top-right-radius: 85% 50%;
    border-top-left-radius: 85% 50%;
    transition: all 0.5s ease-in-out;
  }
  100% {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    transition: all 0.5s ease-in-out;
  }
}

.image-box figure img {
  width: 100%;
}

<div class="image-box">
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample5.jpg" alt="image" />
  </figure>
</div>

Answer 1

悬停伪类必须与定义过渡的元素位于同一元素上。您的情况是在common/spec和.image-box figure:before中定义的。

.image-box figure:after

您在.image-box figure:hover:before, .image-box figure:hover:after上使用了:hover伪类，如下所示：.image-box

到边境过渡不来

1 个答案: