特定div元素内的CSS掉落对象

Question

我正在制作一个部分，其中该元素内有一个降雪对象，但我的问题是雪仍在该元素外降落，我希望它仅在特定元素内

我使用本教程尝试了这个下降的物体 链接：https://www.kirupa.com/html5/the_falling_snow_effect.htm

这是HTML：

<section class="section-countdown">

        <div id="snowflakeContainer">
            <p class="snowflake">*</p>
        </div>
        <h2>THIS CONGRESS BEGINS IN</h2>
        <ul class="countdown">
            <li> <span id="days"></span>
                <p class="days_ref">DAYS</p>
            </li>
            <li class="seperator">:</li>
            <li> <span id="hours"></span>
                <p class="hours_ref">HOURS</p>
            </li>
            <li class="seperator">:</li>
            <li> <span id="minutes"></span>
                <p class="minutes_ref">MINUTES</p>
            </li>
            <li class="seperator">:</li>
            <li> <span id="seconds"></span>
                <p class="seconds_ref">SECONDS</p>
            </li>
        </ul>
    </section>

这是SCSS：

.section-countdown {
    margin: 0 auto;
    padding: 45px 0;
    max-width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;

    #snowflakeContainer {
        position: absolute;
        left: 0px;
        top: 0px;

        .snowflake {
            padding-left: 15px;
            font-family: Cambria, Georgia, serif;
            font-size: 14px;
            line-height: 24px;
            position: relative;
            color: #FFFFFF;
            user-select: none;
            z-index: 1000;

            &:hover {
                cursor: default;
            }
        }
    }
}