更混亂的向上運動

從頁面底部開始，我的頁面上有一個心臟運動。每個隨機生成移動的大小和速度。

我怎樣才能讓它們在點擊指定位置時出現，而不是出現在頁面底部，并且移動不均勻，而是更混亂并在到達末尾之前消失？

var love = setInterval(function() {
    var r_num = Math.floor(Math.random() * 40)   1;
    var r_size = Math.floor(Math.random() * 30)   10;
    var r_left = Math.floor(Math.random() * 100)   1;
    var r_time = Math.floor(Math.random() * 5)   5;

    $('.bg_heart').append("<div class='heart' style='width:"   r_size   "px;height:"   r_size   "px;left:"   r_left   "%;background:#ff94a7;-webkit-animation:love "   r_time   "s ease;-moz-animation:love "   r_time   "s ease;-ms-animation:love "   r_time   "s ease;animation:love "   r_time   "s ease'></div>");

    $('.bg_heart').append("<div class='heart' style='width:"   (r_size - 10)   "px;height:"   (r_size - 10)   "px;left:"   (r_left   r_num)   "%;background:#ff94a7;-webkit-animation:love "   (r_time   5)   "s ease;-moz-animation:love "   (r_time   5)   "s ease;-ms-animation:love "   (r_time   5)   "s ease;animation:love "   (r_time   5)   "s ease'></div>");

    $('.heart').each(function() {
        var top = $(this).css("top").replace(/[^-\d\.]/g, '');
        var width = $(this).css("width").replace(/[^-\d\.]/g, '');
        if (top <= -100 || width >= 150) {
            $(this).detach();
        }
    });
}, 500);

html,body{
  height:100%
}

.bg_heart {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
 }

.heart {
    position: absolute;
    top: -50%;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -m-transform: rotate(-45deg);
    transform: rotate(-45deg)
 }

.heart:before {
    position: absolute;
    top: -50%;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: 100%;
}

.heart:after {
    position: absolute;
    top: 0;
    right: -50%;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: 100%;
}

@-webkit-keyframes love {
  0%{top:110%}
}
@-moz-keyframes love {
  0%{top:110%}
}
@-ms-keyframes love {
  0%{top:110%}
}
@keyframes love {
  0%{top:110%}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="header-plugin"></div>

<div class="bg_heart"></div>

uj5u.com熱心網友回復：

飛得更亂用setInterval。您還可以將速度更改為您需要的任何速度。

var brd = document.createElement("DIV");
document.body.insertBefore(brd, document.getElementById("board"));

const duration = 3000;
const speed = 0.5;
const cursorXOffset = 0;
const cursorYOffset = -5;

var hearts = [];
    
function generateHeart(x, y, xBound, xStart, scale)
{
  var heart = document.createElement("DIV");
  heart.setAttribute('class', 'heart');
  brd.appendChild(heart);
  heart.time = duration;
  heart.x = x;
  heart.y = y;
  heart.bound = xBound;
  heart.direction = xStart;
  heart.style.left = heart.x   "px";
  heart.style.top = heart.y   "px";
  heart.scale = scale;
  heart.style.transform = "scale("   scale   ","   scale   ")";
  if(hearts == null)
    hearts = [];
  hearts.push(heart);
  return heart;
}

var down = false;
var event = null;

document.onmousedown = function(e) {
  down = true;
  event = e;
}

document.onmouseup = function(e) {
  down = false;
}

document.onmousemove = function(e) {
  event = e;
}

document.ontouchstart = function(e) {
  down = true;
  event = e.touches[0];
}

document.ontouchend = function(e) {
  down = false;
}

document.ontouchmove = function(e) {
  event = e.touches[0];
}

var before = Date.now();
var id = setInterval(frame, 5);
var gr = setInterval(check, 100);

function frame()
{
  var current = Date.now();
  var deltaTime = current - before;
  before = current;
  for(i in hearts)
  {
    var heart = hearts[i];
    heart.time -= deltaTime;
    if(heart.time > 0)
    {
      heart.y -= speed;
      heart.style.top = heart.y   "px";
      heart.style.left = heart.x   heart.direction * heart.bound * Math.sin(heart.y * heart.scale / 30) / heart.y * 100   "px";
    }
    else
    {
      heart.parentNode.removeChild(heart);
      hearts.splice(i, 1);
    }
  }
}

function check()
{
  if(down)
  {
    var start = 1 - Math.round(Math.random()) * 2;
    var scale = Math.random() * Math.random() * 0.8   0.2;
    var bound = 30   Math.random() * 20;
    generateHeart(event.pageX - brd.offsetLeft   cursorXOffset, event.pageY - brd.offsetTop   cursorYOffset, bound, start, scale);
  }
}

html,body{
  height:100%
}

@keyframes heartfade {
  0% {
    opacity : 1;
  }
  50% {
    opacity : 0;
  }
}
.heart {
  z-index : 999;
  animation : heartfade 6s linear;
  position : absolute; 
}
.heart:before,
.heart:after {
  content : "";
  background-color : #ff94a7;
  position : absolute;
  height : 30px;
  width : 45px;
  border-radius : 15px 0px 0px 15px;
}

.heart:before {
  transform : rotate(45deg);
}

.heart:after {
  left : 10.5px;
  transform : rotate(135deg);
}

標籤：javascript html css

上一篇：是否可以撰寫“全有或全無”的CSS規則？

下一篇：懸停滑鼠指標時如何修復CSS背景顏色