« Art and Photography Forum

Here is a code to make it rain hearts

<div class="hearts">


  <div class="heart">


 


  </div>


  <div class="heart">


 


  </div>


  <div class="heart">


 


  </div>


  <div class="heart">


 


  </div>


  <div class="heart">


 


  </div>


  <div class="heart">


 


  </div>


  <div class="heart">


   


  </div>


  <div class="heart">


   


  </div>


  <div class="heart">


   


  </div>


  <div class="heart">


   


  </div>


  <div class="heart">


   


  </div>


  <div class="heart">


   


  </div>


</div>


<style>


/* customizable heart styling */


.heart {


  color: #pink;


  font-size: 1em;


  font-family: Arial, sans-serif;


  text-shadow: 0 0 5px rgba(0,0,0,0.7);


}





@-webkit-keyframes heart-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes hearts-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes hearts-fall{0%{top:-10%}100%{top:100%}}@keyframes hearts-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.heart{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:hearts-fall,hearts-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:hearts-fall,hearts-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.heart:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.heart:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.heart:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.heart:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.heart:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.heart:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.heart:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.heart:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.heart:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.heart:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.heart:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.heart:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}


</style>






Report Topic

7 Replies

Sort Replies:

Reply by kosehoy815

posted

I do agree with all the ideas you've introduced to your post. They are really convincing and can definitely work. Nonetheless, the posts are very quick for newbies. May just you please lengthen them a bit from subsequent time? Thanks for the post


Report Reply

Reply by NewsIntervention

posted

Wow! Awesome, thanks for the code. 

if you are in search of latest news, visit us...
--NewsIntervention 


Report Reply

Reply by Miau

posted

Thank you!!


Report Reply

Reply by xexanor772

posted

Get all your welding needs sorted with our extensive selection of supplies, safety equipment, and power tools. Shop now for easy online ordering and fast shipping

dis4d situs


Report Reply

Reply by victor.nathanial

posted

>musik4d< Thank you for taking the time to publish this information very useful! >tradisibet link alternatif<


Report Reply

Reply by victor.nathanial

posted

Thank you very much for the sharing! COOL. I read that Post and got it fine and informative. <a href="https://jennaleighlingerie.com/">club77 slot</a>


Report Reply

Reply by victor.nathanial

posted

I would like to say that this blog really convinced me to do it! Thanks, very good post. atex explosion protection


Report Reply