March 31, 2015

Love heart animation using CSS3 & JavaScript

Love heart animation using CSS3 & JavaScript

You can create E-greetings using this. This is done my CSS3 animations and JavaScript.

HTML

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

CSS

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

JavaScript

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("
"); $('.bg_heart').append("
"); $('.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);
demo

2 comments:

  1. i copied the hole code , run it in browser nothing happened . am i missing some thing ?

    ReplyDelete

Popular Posts

Views