Question

我正在尝试将动画制作为div，但问题是使反射消失的div会在按钮外进行过渡。

如何实现将反射div叠加在按钮div内？

body {
  background-color: grey
}

.outer-div {
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

.status-label {
    display: flex;
    width: 30%;
    justify-content: center;
    padding: 0.35em;
    color: white;
    border-radius: 30px;
    font-weight: bold;
    background-color: blue;
}

.animate-label:before {
  content: "";
  position: absolute;
  width: 30%;
  top: -5%;
  height: 105%;
  right: 100%;
  opacity: 0.2;
  transform: rotate(180deg);
  background: rgba(255, 255, 255, 0.5);
  background: linear-gradient( to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.7) 77%, rgba(255, 255, 255, 0.2) 92%, rgba(255, 255, 255, 0.25) 100%);
  animation: shine 2s infinite;
  animation-delay: 0s;
}

@keyframes shine {
  to {
    opacity: 1;
    right: 40%;
  }
}

  <div class="outer-div">
    <div class="status-label animate-label"> 
      <span> Preparing button </span>
    </div>
  </div>

谢谢。

Answer 1

您在错误的容器上设置了overflow: hidden;属性。由于.outer-div的宽度为100％，因此与.status-label相比，没有什么可以“切掉”的。
您必须将溢出属性设置为.status-label.animate-label容器，并使其成为position: relative;。然后，您可以根据需要调整.animate-label和@keyframes shine的属性。

Working example

隐藏溢出动画反映div

1 个答案: