I have a page on which hearts are created and moved to the top of the page.

I want that instead of the created hearts, they spawn and move to the top of the picture.

I tried to do something like this:

$('.bg_heart').append("<div class='heart'><img src='https://i.imgur.com/lQqgp8Y.png'></div>");

But it didn't work.

Or do I need to use something else to create pictures?

How can I do it please help me!

var love = setInterval(function() {
    var r_num = Math.floor(Math.random() * 40)   1;
    var r_size = Math.floor(Math.random() * 65)   10;
    var r_left = Math.floor(Math.random() * 100)   1;
    var r_bg = Math.floor(Math.random() * 25)   100;
    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:rgba(255,"   (r_bg - 25)   ","   r_bg   ",1);-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:rgba(255,"   (r_bg - 25)   ","   (r_bg   25)   ",1);-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 ></div>

CodePudding user response：

Add styles and everything will work

style='left:"   r_left   "%;-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'

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

 $('.bg_heart').append("<div class='heart' style='left:"   r_left   "%;-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'><img src='https://i.imgur.com/lQqgp8Y.png'></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 ></div>