heart!

In this example below you will see how to do a heart! with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by andreanc223, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright andreanc223 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>heart!</title>
  <link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="heartGroup">
</div>

<div>
  <div class="heartText">
    I love you
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/andreanc223/heart-zqmWMK */
.heartText {
  font-family: Oxygen, sans-serif;
  font-size: 30px;
  text-align: center;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 50px;
  width: 200px;
  margin: auto;
}

.heart {
  opacity: 0;
  background-color: #e67896;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(45deg);
  animation: heartBurst 5s linear infinite;
  z-index: 9999;
}
.heart:before {
  background-color: #e67896;
  width: 100px;
  height: 100px;
  left: -50px;
  border-radius: 50%;
  position: absolute;
  content: "";
}
.heart:after {
  background-color: #e67896;
  width: 100px;
  height: 100px;
  top: -50px;
  border-radius: 50%;
  position: absolute;
  content: "";
}
@keyframes heartBurst {
  0% {
    opacity: 0;
    transform: rotate(45deg);
  }
  20% {
    opacity: 1;
    transform: translateY(-200%) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-1000%) rotate(45deg);
  }
}


/*Downloaded from https://www.codeseek.co/andreanc223/heart-zqmWMK */
(function() {
  function generateHearts() {
    for (var i = 0; i < 15; i++) {
      var left = rand(10, 80);
      var top = rand(50, 75);
      var animationDelay = rand(1,5);
      var styleStr = "left: " + left + "%; top: " + top + "%;" + "animation-delay: " + animationDelay + "s;";
      //var styleStr = "";
      var $heart = $("<div>", {class: 'heart', style: styleStr});
      $("#heartGroup").append($heart);
    }
  }
  
  function rand(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }
  
  generateHearts();
}())

Comments