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

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

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