Table of Contents
Very Super heart animation using HTML,CSS and JavaScript.
This is a heart animation and this is very beautiful and love seen this animation heart made by HTML,CSS and JavaScript.
I have given the complete file of this code together whose button is at the bottom and have also explained it step by step. If you want notes then you can join Telegram.
Heart Animation Page HTML Code
Document
I Love You Darling đ
Heart Animation CSS Code
body {
margin:0;
padding:0;
border-box:box-sizing;
}
.background-heart {
height:100vh;
animation:pulseBackground 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) infinite alternate;
}
.message {
font-family: 'Pacifico', cursive;
text-align:center;
font-size:2em;
}
.heart {
z-index:2;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: red;
height: 50px;
width: 50px;
animation:pulse 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) infinite alternate;
}
.heart::after {
background-color: red;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart::before {
content:"";
background-color: red;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
@keyframes pulse {
0% {
transform:rotate(-45deg) scale(1.0);
}
100% {
transform:rotate(-45deg) scale(2.0) ;
}
}
@keyframes pulseBackground {
0% {
background-color:#FFF;
}
100% {
background-color:#FFDDDD;
}
}
Heart Animation JavaScript Code
$(document).ready(function(){
const synth = new Tone.MembraneSynth().toDestination();
const loopA = new Tone.Loop((time) => {
// triggered every eighth note.
synth.triggerAttackRelease("G1", "2n");
console.log(time);
}, "8n").start(0);
const loopB = new Tone.Loop((time) => {
// triggered every eighth note.
synth.triggerAttackRelease("C1", "2n");
console.log(time);
}, "8n").start("2n");
Tone.Transport.start();
Tone.Transport.bpm.rampTo(28);
});
This is my codepen, from this you can also see live projects and also you can join me on codepen, there you will get to see different types of projects.
See the Pen heart animation by Developergtm (@developergtm) on CodePen.