如何限制 CSS 五彩纸屑动画？

Question

我搜索要在网页的一部分上添加五彩纸屑，我发现这个效果正是我搜索的（仅 CSS 中的简单效果）。

https://forum.webflow.com/t/add-falling-confetti-with-css/103687

唯一的问题是我希望五彩纸屑留在我有“五彩纸屑” div 的 div 中，但它们掉到了页面底部。

找不到方法，有什么帮助吗？

这是一个 HTML 示例：

<div class="newsletter-section">
    <div class="page-width">
        <div id="confettis">
            <div class="confetti"></div>
            <div class="confetti"></div>
            <div class="confetti"></div>
            <div class="confetti"></div>
            <div class="confetti"></div>
            <div class="confetti"></div>
            <div class="confetti"></div>
            <div class="confetti"></div>
            <div class="confetti"></div>
         </div>
         <div class="section-header text-center">
             <h2 class="h2">My Title</h2>
             <div class="rte">Lorem Ipsum Dolor Site Amet</div>
         </div>
     </div>
</div>
<footer>
      <p>Some content</p>
</footer>

CSS：

.confetti {
          width: 15px;
          height: 15px;
          background-color: #f2d74e;
          position: absolute;
          left: 50%;
          animation: confetti 5s ease-in-out -2s infinite;
          transform-origin: left top;
        }
        .confetti:nth-child(1) {
          background-color: #f2d74e; left: 10%; animation-delay: 0;
        }
        .confetti:nth-child(2) {
          background-color: #95c3de; left: 20%; animation-delay: -5s;
        }
        .confetti:nth-child(3) {
          background-color: #ff9a91; left: 30%; animation-delay: -3s;
        }
        .confetti:nth-child(4) {
          background-color: #f2d74e; left: 40%; animation-delay: -2.5s;
        }
        .confetti:nth-child(5) {
          background-color: #95c3de; left: 50%; animation-delay: -4s;
        }
        .confetti:nth-child(6) {
          background-color: #ff9a91; left: 60%; animation-delay: -6s;
        }
        .confetti:nth-child(7) {
          background-color: #f2d74e; left: 70%; animation-delay: -1.5s;
        }
        .confetti:nth-child(8) {
          background-color: #95c3de; left: 80%; animation-delay: -2s;
        }
        .confetti:nth-child(9) {
          background-color: #ff9a91; left: 90%; animation-delay: -3.5s;
        }
        .confetti:nth-child(10) {
          background-color: #f2d74e; left: 100%; animation-delay: -2.5s;
        }

        @keyframes confetti {
          0% { transform: rotateZ(15deg) rotateY(0deg) translate(0,0); }
          25% { transform: rotateZ(5deg) rotateY(360deg) translate(-5vw,20vh); }
          50% { transform: rotateZ(15deg) rotateY(720deg) translate(5vw,60vh); }
          75% { transform: rotateZ(5deg) rotateY(1080deg) translate(-10vw,80vh); }
          100% { transform: rotateZ(15deg) rotateY(1440deg) translate(10vw,110vh); }
        }

我只是不希望五彩纸屑显示在页脚上，只显示在 .newsletter-section div 中。

Answer 1

使用overflow: hidden。

.newsletter-section {
  position: relative;
}

#confettis {
  overflow: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
}

.confetti {
  width: 15px;
  height: 15px;
  background-color: #f2d74e;
  position: absolute;
  left: 50%;
  animation: confetti 5s ease-in-out -2s infinite;
  transform-origin: left top;
}

.confetti:nth-child(1) {
  background-color: #f2d74e;
  left: 10%;
  animation-delay: 0;
}

.confetti:nth-child(2) {
  background-color: #95c3de;
  left: 20%;
  animation-delay: -5s;
}

.confetti:nth-child(3) {
  background-color: #ff9a91;
  left: 30%;
  animation-delay: -3s;
}

.confetti:nth-child(4) {
  background-color: #f2d74e;
  left: 40%;
  animation-delay: -2.5s;
}

.confetti:nth-child(5) {
  background-color: #95c3de;
  left: 50%;
  animation-delay: -4s;
}

.confetti:nth-child(6) {
  background-color: #ff9a91;
  left: 60%;
  animation-delay: -6s;
}

.confetti:nth-child(7) {
  background-color: #f2d74e;
  left: 70%;
  animation-delay: -1.5s;
}

.confetti:nth-child(8) {
  background-color: #95c3de;
  left: 80%;
  animation-delay: -2s;
}

.confetti:nth-child(9) {
  background-color: #ff9a91;
  left: 90%;
  animation-delay: -3.5s;
}

.confetti:nth-child(10) {
  background-color: #f2d74e;
  left: 100%;
  animation-delay: -2.5s;
}

@keyframes confetti {
  0% {
    transform: rotateZ(15deg) rotateY(0deg) translate(0, 0);
  }
  25% {
    transform: rotateZ(5deg) rotateY(360deg) translate(-5vw, 20vh);
  }
  50% {
    transform: rotateZ(15deg) rotateY(720deg) translate(5vw, 60vh);
  }
  75% {
    transform: rotateZ(5deg) rotateY(1080deg) translate(-10vw, 80vh);
  }
  100% {
    transform: rotateZ(15deg) rotateY(1440deg) translate(10vw, 110vh);
  }
}

<div class="newsletter-section">
  <div class="page-width">
    <div id="confettis">
      <div class="confetti"></div>
      <div class="confetti"></div>
      <div class="confetti"></div>
      <div class="confetti"></div>
      <div class="confetti"></div>
      <div class="confetti"></div>
      <div class="confetti"></div>
      <div class="confetti"></div>
      <div class="confetti"></div>
    </div>
    <div class="section-header text-center">
      <h2 class="h2">My Title</h2>
      <div class="rte">Lorem Ipsum Dolor Site Amet</div>
    </div>
  </div>
</div>
<footer>
  <p>Some content</p>
</footer>