Heart Animation Source Code: How To Create, HTML, CSS & JS

Heart Animation Source Code: Hi dear, programmers in this article we are going to create heart animation using Html, CSS, and Javascript code. So friends it’s very simple code you can easily make this heart animation. Animations can bring life to your website, making it more engaging and interactive. One popular animation that stands out is the “Heart Animation Source Code” Many of the people searching daily this type of simple code here you will found this source code. All source code of HTML, CSS and Javascript you will found here and easily execute. so without delaying time let’s get start how we will make this animation.

Article Name	Heart Animation Source Code
Publish Date	24/10/24
Language Used	Html, Css, & Javascript
Tools Required	Code Editor (e.g., VS Code), Browser (e.g., Chrome)
Mobile Responsive	Use media queries and percentage-based sizing for responsiveness
Source Code	Available Link Below

What Tools You Need To Run This Heart Animation Source Code

• HTML: For the structure.
• CSS: To design and animate the heart.
• JavaScript (JS): To add interactivity.
• Code Editor: Any editor like Visual Studio Code, Sublime, or even Notepad.
• Browser: Chrome, Firefox, or any browser that can render HTML, CSS, and JavaScript.

How To Create Heart Animation Using HTML, CSS & JS

Dear friends, A heart animation involves creating the shape of a heart using CSS and adding animation effects. CSS allows us to style and animate the heart, while JavaScript enables interactivity. we will create Heart Animation Source Code following three steps:

In first step we will write html code for heart animation in code editor

HTML Code for the Heart Animation

The focus here is on providing a clean, simple framework for our CSS and JavaScript to work on.

Danger, Warning, Alert Messages Notification

 <div class="container">
        <div class="heart"></div>
    </div>

Second Step We will Beautify Heart Animation Source Code Using CSS

The CSS code creates the heart shape using the magic of ::before and ::after pseudo-elements and then animates it using @keyframes. You can easily modify the size, color, and speed of the animation.

*
  {
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{
           display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background: radial-gradient(#4c0c0c,#000);
           
        }
       
       .container{
            top:35%;    
            display: flex;
            justify-content: center;
            filter: drop-shadow(6px -2px 8px #ff0357);
        }
        .heart{
            position: relative;
            height: 200px;
            width: 130px;
            background-color:pink;
            transform: rotate(45deg);
            border-radius: 200px 200px 0px 0px;
            animation: pump 3s infinite ease-in-out;
       
        }
        .heart::before{
            content: " ";
            position: absolute;
            top:35px;
            left:-40px;
            height: 200px;
            width: 130px;
            background-color: pink;
            transform: rotate(270deg);
            border-radius: 200px 200px 0px 0px; 
            animation: pump 3s infinite ease-in-out;
            }
        @keyframes pump{
            0%{
                height: 200px;
                width: 130px;
            }
            30%{
                height: 190px;
                width: 120px;
            }
            60%{
                height: 180px;
                width: 110px;
                border-radius:100px 100px 0px 0px;
            }
            90%{
                height: 200px;
                width: 130px;
            }
        }

    .fa-heart {
    color: crimson;
    font-size: 25px;
    position: absolute;
    animation:  heartMove linear 1;
    top: -5vh;
    z-index: 0;
}

@keyframes heartMove {
    0%{
        transform: translateY(-10vh) ;
    }
    100%{
        transform: translateY(110vh) ;
    }
}

Third Step We will Using Javacript

The JavaScript code listens for a click event, making the heart pulse faster or stop altogether. This allows for user engagement, such as a like button that gets a visual cue when clicked.

const body = document.querySelector("body");

function createHeart() {
    const heart = document.createElement("div");
    heart.className = "fas fa-heart";
    heart.style.left = (Math.random() * 100)+"vw";
    heart.style.animationDuration = (Math.random()*3)+5+"s"
    body.appendChild(heart);
}
setInterval(createHeart,100);
setInterval(function name(params) {
    var heartArr = document.querySelectorAll(".fa-heart")
    if (heartArr.length > 200) {
       heartArr[0].remove()
    }

},100)

const year = document.getElementById("year");

year.textContent = new Date().getFullYear();

Combining HTML, CSS, and JS

When we combine all three files (HTML, CSS, and JavaScript), we have a fully functional, interactive heart animation that beats continuously and responds to user interaction.

Output

See the Pen Heart Animation by Codeswithsam (@Codeswithsam) on CodePen.

Heart Animation Mobile Responsiveness

Don’t forget about mobile! To ensure your heart animation works well on smaller screens, consider setting the width and height in percentages or using media queries to adjust the size on mobile devices.

Important Links

Heart Animation Source Code Link	Click Here
Check Out Other Source Code	Cick Here
Our Website	Codeswithsam.com
Join Telegram	Click Here

If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Thanks! 🙏 for visiting Codeswithsam.com ! Join telegram (link available in bottom) for source code files , pdf and
Any Promotion queries 👇
info@codeswithsam.com

FAQ