JS / CSS - Periscope Heart Like Effect

Question

使用本教程http://zanilic.com/periscope-likes-tutorial-jquery-css3（演示：http://zanilic.com/tutorials/periscope-hearts-css3-jquery/）

我正在尝试编辑潜望镜显示心脏点击以满足我的需求：

• 而不是点击，它会自动循环
• 而不是从一个静态点产生，它在示例中沿着div的底部产生
• 随机化上升路线（所以当它产生时，它们并不都只是按照相同的路线）

我已经实现了自动化，但我在最后两个问题上有点困难。 有人能帮忙吗？

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

＆＃13;

＆＃13;

$( 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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;