Create a Romantic Heart Falling Animation with CSS and jQuery Snowfall
This tutorial shows how to build a Valentine‑themed full‑screen heart animation that falls like snow using HTML, CSS pseudo‑elements, CSS transforms, and the jquery‑snowfall plugin, with complete source code and customization tips.
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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Heart Snowfall</title>
<style media="screen">
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;
}
</style>
</head>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.
.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); }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.
.snowfall-flakes:after { left: 13px; /* rotation rules from step 2 */ }After the heart shape is ready, invoke the snowfall plugin to make the hearts fall across the screen.
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="snowfall.jquery.js"></script>
<script>
$(document).snowfall({ flakeCount: 50 }); // 50 hearts
$(window).resize(function(){ location.reload(true); });
</script>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.
<!DOCTYPE html>
<html>
<head>
... (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; }
</style>
</head>
<body>
<div class="heart-body">
<div class="snowfall-flakes"></div>
</div>
<div class="bgimg"></div>
</body>
</html>Feel free to adjust the size, color, or number of hearts, and share your own variations. Happy Valentine's Day!
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
php Courses
php中文网's platform for the latest courses and technical articles, helping PHP learners advance quickly.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.