-->

Monday, January 20, 2014

FREE Floating Hearts Valentine's Day Effect

Inspired from css-mfc-pro's (Dan) falling snow flake effect for the holiday season.



I made a floating hearts effect to add to your profile for the month of February to celebrate Valentine's Day. 




If you would like to add this effect to your profile, all you have to do is copy n' paste the code below to your custom css section.


CSS Code:

.profile_section_content {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8gJqU_DYZ5HfzjtpL9OP9TalkQHVAOVgN9JYv2VLsUdtURjr9rjNyCVU16ebuBQrHHwavGLX2a4inbxIr6W0bTEl3O1bIvtmoI9-4uBYDeA0WAbgSg2OfBvDRE2edilmM_e_Stv8tjKJZ/s1600/hearts1.png),url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihdH8xiRP_v9ZjKOZ4TAZ3Qrq_6WKgUKzZtS7BTI2Ia6aOtL0RcUhwHnUXvipOwG9myKe73T2n6edY9OekhkSEFyWzMwrp6aNKSDgCQd7KbYd40Vhiorh0-ML0H0R-VmboT-eiVYy2kpr7/s1600/hearts2.png),url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyzVTRcUJjY_EOHbc_sFFp-C2_5QhiJlMMPqxvnbFm2kXzCOxTYy6n4Kkau6iwP_KfcoUcez83fei90H5ZixVZkFODWiSZXqfGYvnvO11wudbssiUiaYpjbC0rPYujdAeIz_7cvDrEQHCl/s1600/hearts3.png);
  -webkit-animation:hearts 20s linear infinite;
  -moz-animation:hearts 20s linear infinite;
  -ms-animation:hearts 20s linear infinite;
  animation:hearts 20s linear infinite;
}

@keyframes hearts {
  0% {
    background-position:0 0px,0 0px,0 0;
  }
 
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
  }
}

@-moz-keyframes hearts {
  0% {
    background-position:0 0px,0 0px,0 0;
  }
 
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
  }
}

@-webkit-keyframes hearts {
  0% {
    background-position:0 0px,0 0px,0 0;
    background-color:rgba(0,0,0,0.7);
  }
 
  50% {
    background-color:rgba(0,0,0,0.7);
  }
 
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
    background-color:rgba(0,0,0,0.7);
  }
}

@-ms-keyframes hearts {
  0% {
    background-position:0 0px,0 0px,0 0;
  }
 
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
  }

No comments:

Post a Comment