JS/CSS-潜望镜心脏喜欢效果

Question

使用本教程http://zanilic.com/periscope-likes-tutorial-jquery-csss3（demo：http：//zanilic.com/tutorials/tutorials/periscope-hends-css3--jQuery/）

我正在尝试编辑Periscope在单击时表明心脏以适合我的需求：

• 而不是单击，它会自动循环
• 它不是从一个静态斑点产卵，而是在示例中沿Div的底部产生
• 随机将上升路线（因此，当它产生时，它们都不只是遵循同一路线）

ive使自动化起作用，但我在最后两个中有点陷入困境。有人可以提供帮助吗？

$( document ).ready(function() {
    callme();
});
function hearts() {
  // Init
  var rand = Math.floor(Math.random() * 100 + 1);
  var flows = ["flowOne", "flowTwo", "flowThree"];
  var colors = ["colOne", "colTwo", "colThree", "colFour", "colFive", "colSix"];
  var timing = (Math.random() * (1.3 - 1.0) + 1.0).toFixed(1);
  // Animate Particle
  $(
    '<div class="particle part-' +
      rand +
      " " +
      colors[Math.floor(Math.random() * 6)] +
      '" style="font-size:' +
      Math.floor(Math.random() * (30 - 22) + 22) +
      'px;"><i class="fa fa-heart"></i></div>'
  )
    .appendTo(".particle-box")
    .css({
      animation:
        "" + flows[Math.floor(Math.random() * 3)] + " " + timing + "s linear"
    });
  $(".part-" + rand).show();
  // Remove Particle
  setTimeout(function() {
    $(".part-" + rand).remove();
  }, timing * 1000 - 100);
};
function callme() {
  hearts();
  setTimeout(callme, 500);
}

.particle-box {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
div.particle {
    width: 30px; 
    height: 30px; 
    opacity: 1;
    position: relative;
    bottom: 0;
    display: none;
}
div.particle i {
    position: relative;
    left: 0px;
    top: 0px;
    opacity: 0.3;
    color: red;
}
div.particle i.fa-heart-o {
    z-index: 1;
    opacity: 0.8;
  color: red;
}
@keyframes flowOne {
    0% {
        opacity: 0;
        bottom: 0%;
        left: 14%;
    }
    40% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
        left: 0%;
    }
    60% {
        opacity: 0.2;
    }
    80% {
        bottom: 80%;
    }
    100% {
        opacity: 0;
        bottom: 100%;
        left: 18%;
    }
}
@keyframes flowTwo {
	0% {
		opacity: 0;
		bottom: 0%;
		left: 0%;
	}
	40% {
		opacity: 0.8;
	}
	50% {
		opacity: 1;
		left: 11%;
	}
	60% {
		opacity: 0.2;
	}
	80% {
		bottom: 60%;
	}
	100% {
		opacity: 0;
		bottom: 80%;
		left: 0%;
	}
}
@keyframes flowThree {
	0% {
		opacity: 0;
		bottom: 0%;
		left: 0%;
	}
	40% {
		opacity: 0.8;
	}
	50% {
		opacity: 1;
		left: 30%;
	}
	60% {
		opacity: 0.2;
	}
	80% {
		bottom: 70%;
	}
	100% {
		opacity: 0;
		bottom: 90%;
		left: 0%;
	}
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Start Content -->
<div class="particle-box"></div>
<!-- End Content -->

谢谢！

Answer 1

好的，所以经过漫长的斗争，我发现这两个班级是罪魁祸首，这里是相对的，所以我使它变得绝对并增加了身高现在。

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;
}

$( document ).ready(function() {
    callme();
});
function hearts() {
  // Init
  var rand = Math.floor(Math.random() * 100 + 1);
  var flows = ["flowOne", "flowTwo", "flowThree"];
  var colors = ["colOne", "colTwo", "colThree", "colFour", "colFive", "colSix"];
  var timing = (Math.random() * (1.3 - 1.0) + 1.0).toFixed(1);
  // Animate Particle
  $(
    '<div class="particle part-' +
      rand +
      " " +
      colors[Math.floor(Math.random() * 6)] +
      '" style="font-size:' +
      Math.floor(Math.random() * (30 - 22) + 22) +
      'px;"><i class="fa fa-heart"></i></div>'
  )
    .appendTo(".particle-box")
    .css({
      animation:
        "" + flows[Math.floor(Math.random() * 3)] + " " + timing + "s linear"
    });
  $(".part-" + rand).show();
  // Remove Particle
  setTimeout(function() {
    $(".part-" + rand).remove();
  }, timing * 1000 - 100);
};
function callme() {
  hearts();
  setTimeout(callme, 500);
}

.particle-box {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
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;
}
div.particle i.fa-heart-o {
    z-index: 1;
    opacity: 0.8;
  color: red;
}
@keyframes flowOne {
    0% {
        opacity: 0;
        bottom: 0%;
        left: 14%;
    }
    40% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
        left: 0%;
    }
    60% {
        opacity: 0.2;
    }
    80% {
        bottom: 80%;
    }
    100% {
        opacity: 0;
        bottom: 100%;
        left: 18%;
    }
}
@keyframes flowTwo {
	0% {
		opacity: 0;
		bottom: 0%;
		left: 0%;
	}
	40% {
		opacity: 0.8;
	}
	50% {
		opacity: 1;
		left: 11%;
	}
	60% {
		opacity: 0.2;
	}
	80% {
		bottom: 60%;
	}
	100% {
		opacity: 0;
		bottom: 80%;
		left: 0%;
	}
}
@keyframes flowThree {
	0% {
		opacity: 0;
		bottom: 0%;
		left: 0%;
	}
	40% {
		opacity: 0.8;
	}
	50% {
		opacity: 1;
		left: 30%;
	}
	60% {
		opacity: 0.2;
	}
	80% {
		bottom: 70%;
	}
	100% {
		opacity: 0;
		bottom: 90%;
		left: 0%;
	}
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Start Content -->
<div class="particle-box"></div>
<!-- End Content -->