Javascript JS/CSS-潜望镜心形效果

使用本教程（演示：）

我正试图在点击时编辑潜望镜显示心形，以满足我的需要：

• 它不会单击，而是自动循环
• 在本例中，它不是从一个静态点生成，而是沿着div的底部生成
• 随机化上升路线（这样当它产卵时，它们不会都遵循相同的路线）

我已经让自动化系统开始工作了，但最后两个问题让我有点为难。 有人能帮忙吗

$（文档）.ready（函数（）{
callme（）；
});
功能心脏（）{
//初始化
var rand=Math.floor（Math.random（）*100+1）；
风险值流量=[“流量一”、“流量二”、“流量三”]；
var colors=[“colOne”、“colTwo”、“colThree”、“colFour”、“colFive”、“colSix”]；
变量计时=（Math.random（）*（1.3-1.0）+1.0）.toFixed（1）；
//设置粒子动画
$(
''
)
.appendTo（“.particle box”）
.css({
动画：
“+flows[Math.floor（Math.random（）*3）]+”“+timing+s linear”
});
$（“.part-”+rand.show（）；
//去除颗粒
setTimeout（函数（）{
$（“.part-”+rand.remove（）；
}，定时*1000-100）；
};
函数callme（）{
红心（）；
设置超时（callme，500）；
}

.particle-box{
宽度：200px；
高度：200px；
边框：1px纯黑；
}
分区粒子{
宽度：30px；
高度：30px；
不透明度：1；
位置：相对位置；
底部：0；
显示：无；
}
第一部分{
位置：相对位置；
左：0px；
顶部：0px；
不透明度：0.3；
颜色：红色；
}
分区粒子i.fa-heart-o{
z指数：1；
不透明度：0.8；
颜色：红色；
}
@关键帧flowOne{
0% {
不透明度：0；
底部：0%；
左：14%；
}
40% {
不透明度：0.8；
}
50% {
不透明度：1；
左：0%；
}
60% {
不透明度：0.2；
}
80% {
底部：80%；
}
100% {
不透明度：0；
底部：100%；
左：18%；
}
}
@两个关键帧{
0% {
不透明度：0；
底部：0%；
左：0%；
}
40% {
不透明度：0.8；
}
50% {
不透明度：1；
左：11%；
}
60% {
不透明度：0.2；
}
80% {
底部：60%；
}
100% {
不透明度：0；
底部：80%；
左：0%；
}
}
@三个关键帧{
0% {
不透明度：0；
底部：0%；
左：0%；
}
40% {
不透明度：0.8；
}
50% {
不透明度：1；
左：30%；
}
60% {
不透明度：0.2；
}
80% {
底部：70%；
}
100% {
不透明度：0；
底部：90%；
左：0%；
}
}

---

好的，经过长时间的斗争，我发现这两个职业是罪魁祸首，这里的位置以前是相对的，所以我将其设置为绝对位置并增加高度，所以现在心脏在盒子里

div.particle {
    width: 30px; 
    height: 80px; 
    opacity: 1;
    position: absolute;
    bottom: 0;
    display: none;
}
div.particle i {
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0.3;
    color: red;
}

$（文档）.ready（函数（）{
callme（）；
});
功能心脏（）{
//初始化
var rand=Math.floor（Math.random（）*100+1）；
风险值流量=[“流量一”、“流量二”、“流量三”]；
var colors=[“colOne”、“colTwo”、“colThree”、“colFour”、“colFive”、“colSix”]；
变量计时=（Math.random（）*（1.3-1.0）+1.0）.toFixed（1）；
//设置粒子动画
$(
''
)
.appendTo（“.particle box”）
.css({
动画：
“+flows[Math.floor（Math.random（）*3）]+”“+timing+s linear”
});
$（“.part-”+rand.show（）；
//去除颗粒
setTimeout（函数（）{
$（“.part-”+rand.remove（）；
}，定时*1000-100）；
};
函数callme（）{
红心（）；
设置超时（callme，500）；
}

.particle-box{
宽度：200px；
高度：200px；
边框：1px纯黑；
}
分区粒子{
宽度：30px；
高度：80px；
不透明度：1；
位置：绝对位置；
底部：0；
显示：无；
}
第一部分{
位置：绝对位置；
左：0px；
顶部：0px；
不透明度：0.3；
颜色：红色；
}
分区粒子i.fa-heart-o{
z指数：1；
不透明度：0.8；
颜色：红色；
}
@关键帧flowOne{
0% {
不透明度：0；
底部：0%；
左：14%；
}
40% {
不透明度：0.8；
}
50% {
不透明度：1；
左：0%；
}
60% {
不透明度：0.2；
}
80% {
底部：80%；
}
100% {
不透明度：0；
底部：100%；
左：18%；
}
}
@两个关键帧{
0% {
不透明度：0；
底部：0%；
左：0%；
}
40% {
不透明度：0.8；
}
50% {
不透明度：1；
左：11%；
}
60% {
不透明度：0.2；
}
80% {
底部：60%；
}
100% {
不透明度：0；
底部：80%；
左：0%；
}
}
@三个关键帧{
0% {
不透明度：0；
底部：0%；
左：0%；
}
40% {
不透明度：0.8；
}
50% {
不透明度：1；
左：30%；
}
60% {
不透明度：0.2；
}
80% {
底部：70%；
}
100% {
不透明度：0；
底部：90%；
左：0%；
}
}

是否要按演示中所示在单击时显示动画？否，我希望它在循环中运行！不过，我已经做到了这一点，只需要帮助将心脏限制在盒子内（因此它从底部开始，在接近顶部时逐渐消失）