Create a Romantic Heart Falling Animation with CSS and jQuery Snowfall

With Valentine's Day approaching, many developers want to decorate their web pages with a romantic effect. This guide walks you through creating a full‑screen heart animation that falls like snow using HTML, CSS pseudo‑elements, CSS transforms, and the jquery‑snowfall plugin.

Prerequisites : Include jQuery and snowfall.jquery.js in your page. The plugin can be downloaded from npmjs.com/package/jquery-snowfall .

Step 1 – Draw the heart with pseudo‑elements : Use ::before and ::after on a container element to create two overlapping rectangles that form the heart shape.

<code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Heart Snowfall&lt;/title&gt;
    &lt;style media="screen"&gt;
        body { overflow-y: hidden; }
        .heart-body { width: 500px; margin: 100px auto; position: relative; }
        .snowfall-flakes:before,
        .snowfall-flakes:after {
            content: "";
            position: absolute;
            left: 0px;
            top: 0px;
            display: block;
            width: 30px;
            height: 46px;
            background: red;
            border-radius: 50px 50px 0 0;
        }
    &lt;/style&gt;
&lt;/head&gt;</code>

Step 2 – Rotate the pseudo‑elements : Apply transform: rotate(-45deg) to ::before and transform: rotate(45deg) to ::after (including vendor prefixes) so the two rectangles form a heart.

<code>.snowfall-flakes:before { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.snowfall-flakes:after  { -webkit-transform: rotate(45deg);  -moz-transform: rotate(45deg);  -ms-transform: rotate(45deg);  -o-transform: rotate(45deg);  transform: rotate(45deg); }</code>

Step 3 – Shift the right half : Move the ::after element left by a few pixels (e.g., left: 13px ) so the two halves overlap and create the heart silhouette.

<code>.snowfall-flakes:after { left: 13px; /* rotation rules from step 2 */ }</code>

After the heart shape is ready, invoke the snowfall plugin to make the hearts fall across the screen.

<code>&lt;script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"&gt;&lt;/script&gt;
&lt;script src="snowfall.jquery.js"&gt;&lt;/script&gt;
&lt;script&gt;
    $(document).snowfall({ flakeCount: 50 }); // 50 hearts
    $(window).resize(function(){ location.reload(true); });
&lt;/script&gt;</code>

The complete HTML file (including optional background image styling) is provided below. You can shrink the heart by changing the width, height, and border‑radius values, and adjust left accordingly.

<code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    ... (styles from previous steps) ...
    .snowfall-flakes:before,
    .snowfall-flakes:after { width: 10px; height: 16px; border-radius: 10px 10px 0 0; }
    .snowfall-flakes:after { left: 4px; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="heart-body"&gt;
        &lt;div class="snowfall-flakes"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="bgimg"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code>

Feel free to adjust the size, color, or number of hearts, and share your own variations. Happy Valentine's Day!