Javascript 如何控制依赖于html列表项的css动画

下面是一些css，它播放一个杯子填充动画。我试图实现的是根据无序html列表中列表项的数量来改变杯子中的水位，例如，列表项越多，杯子就越满，但我不确定如何进行

.cup{
位置：绝对位置；
最高：50%；
右：50%；
转换：翻译（-50%，-50%）；
宽度：150px；
高度：180像素；
边框：6px实心#262626；
边框顶部：2倍纯色透明；
边界半径：15px；
边框左上半径：5px；
边框右上角半径：5px；
背景：url(https://i.imgur.com/kbpChd4.png);
背景重复：重复-x；
动画：动画10秒线性无限；
盒影：0.6px#fff，0.20px 35px rgba（0,0,0,1）；
}
.杯子：以前{
内容：''；
位置：绝对位置；
宽度：50px；
高度：80px；
边框：6px实心#fff；
右：-57px；
顶部：30px；
边框右上角半径：35px；
边框右下半径：35px；
}
@关键帧设置动画{
0% {
背景位置：0 100px；
}
10% {
背景位置：0 100px；
}
40% {
背景位置：1000px-10px；
}
80% {
背景位置：1000px-20px；
}
100% {
背景位置：2500px 100px；
}
}

项目1

将css中动画填充级别的位置更改为某些类，然后使用JQUERY分配或更改这些类

我为你制作了一把小提琴，上面有两个杯子

.cup {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 180px;
    border: 6px solid #262626;
    border-top: 2px solid transparent;
    border-radius: 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: url(https://i.imgur.com/kbpChd4.png);
    background-repeat: repeat-x;
    animation: animate 10s linear infinite;
    box-shadow: 0 0 0 6px #fff, 0 20px 35px rgba(0,0,0,1);
}
.cup.two {
    top: 50%;
    right: 10%;
    animation: half 10s linear infinite;
}



    .cup:before {
        content: '';
        position: absolute;
        width: 50px;
        height: 80px;
        border: 6px solid #fff;
        right: -57px;
        top: 30px;
        border-top-right-radius: 35px;
        border-bottom-right-radius: 35px;
    }

@keyframes animate {
    0% {
        background-position: 0 100px;
    }

    10% {
        background-position: 0 100px;
    }

    40% {
        background-position: 1000px -10px;
    }

    80% {
        background-position: 1000px -20px;
    }

    100% {
        background-position: 2500px 100px;
    }
}

@keyframes half {
    0% {
        background-position: 0 100px;
    }

    10% {
        background-position: 0 100px;
    }

    40% {
        background-position: 1000px 70px;
    }

    80% {
        background-position: 1000px 80px;
    }
    100% {
        background-position: 2500px 90px;
    }

}

HTML在这里：

<ul>
<li>Item1</li>
</ul>
<div class="cup"></div>
<div class="cup two"></div>

项目1

将css中动画填充级别的位置更改为某些类，然后使用JQUERY指定或更改这些类

我为你制作了一把小提琴，上面有两个杯子

.cup {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 180px;
    border: 6px solid #262626;
    border-top: 2px solid transparent;
    border-radius: 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: url(https://i.imgur.com/kbpChd4.png);
    background-repeat: repeat-x;
    animation: animate 10s linear infinite;
    box-shadow: 0 0 0 6px #fff, 0 20px 35px rgba(0,0,0,1);
}
.cup.two {
    top: 50%;
    right: 10%;
    animation: half 10s linear infinite;
}



    .cup:before {
        content: '';
        position: absolute;
        width: 50px;
        height: 80px;
        border: 6px solid #fff;
        right: -57px;
        top: 30px;
        border-top-right-radius: 35px;
        border-bottom-right-radius: 35px;
    }

@keyframes animate {
    0% {
        background-position: 0 100px;
    }

    10% {
        background-position: 0 100px;
    }

    40% {
        background-position: 1000px -10px;
    }

    80% {
        background-position: 1000px -20px;
    }

    100% {
        background-position: 2500px 100px;
    }
}

@keyframes half {
    0% {
        background-position: 0 100px;
    }

    10% {
        background-position: 0 100px;
    }

    40% {
        background-position: 1000px 70px;
    }

    80% {
        background-position: 1000px 80px;
    }
    100% {
        background-position: 2500px 90px;
    }

}

HTML在这里：

<ul>
<li>Item1</li>
</ul>
<div class="cup"></div>
<div class="cup two"></div>

项目1

您的列表项在哪里？my bad@TemaniAfif将立即添加列表项在哪里？my bad@TemaniAfif将立即添加列表项