http://blog.thelittletechie.com/2015/03/love-heart-animation-using-css3.html
A Pen by Vivin Antony on CodePen.
<div id="header-plugin"></div> | |
<div class="bg_heart"></div> |
$( "#header-plugin" ).load( "https://vivinantony.github.io/header-plugin/", function() { | |
$("a.back-to-link").attr("href", "http://blog.thelittletechie.com/2015/03/love-heart-animation-using-css3.html#tlt") | |
}); | |
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); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
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%} | |
} |