Creating a Butterfly Animation Using HTML & CSS ~ WebDev

In this tutorial, I will guide you through how to create an amazing butterfly animation using HTML and CSS. We'll break down the code step-by-step and explain how both the HTML and CSS work together to produce the animation effect. Let’s dive into the magic of web development.

HTML Structure

HTML forms the backbone of any webpage, and here, it structures the butterfly elements on the page. Below is the complete HTML file used for the butterfly animation:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Butterfly Animation</title>
<style>
    /* CSS goes here */
</style>
</head>
<body>
    <div class="box">
        <div class="wings-leftbox fly">
            <div class="wing-left-top bgclr"></div>
            <div class="wing-left-bottom bgclr"></div>
        </div>
        <div class="mid-body">
            <div class="mid-part start midshed"></div>
            <div class="mid-part midpoint midshed"></div>
            <div class="mid-part end midshed"></div>
        </div>
        <div class="wings-rightbox fly">
            <div class="wing-right-top bgclr"></div>
            <div class="wing-right-bottom bgclr"></div>
        </div>
    </div>
</body>
</html>

Explanation of HTML

DOCTYPE and Meta Tags:

<!DOCTYPE html> defines the document as an HTML5 document.
<meta charset="UTF-8"> ensures proper character encoding, especially important for displaying special characters.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> ensures the webpage is responsive, adjusting its layout based on the device width.

Title:

The <title>Butterfly Animation</title> tag defines the title of the webpage. When opened in a browser, this title is shown in the browser tab.

Main Container (.box):

The butterfly is contained within a div element with the class box. This div acts as a central container for the butterfly animation.

Wings (.wings-leftbox, .wings-rightbox):

The butterfly's wings are split into two sections: left and right. Each wing section is further divided into a top (wing-left-top, wing-right-top) and bottom (wing-left-bottom, wing-right-bottom) wing.
These elements are where the visual effects (colors and shapes) are applied through CSS.

Butterfly Body (.mid-body):

The butterfly’s body is represented by a div with the class mid-body. This body is split into three parts (head, midsection, and tail) for aesthetic purposes and to make it more lifelike.
Each section is styled using the class mid-part.

CSS Styling for Butterfly Animation

Next, we apply styles using CSS to bring the butterfly to life.


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

:root {
    --wings-tpheight: 40%;
    --wings-btmheight: 34%;
    --top-wing-width: 100%;
    --btm-wing-width: 86%;
    --midclr: white;
    --shadow: 2px 3px 1.5rem;
}

body {
    background: black;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    height: 300px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.box::after {
    content: "@Developer Manoj";
    color: rgba(255, 255, 255, 0.6);
    position: absolute;
    bottom: 10%;
    font-size: 3vh;
    text-shadow: 4px 4px 2px deeppink, -3px -3px 2px deepskyblue;
}

/* Wing styling */
.wings-rightbox, .wings-leftbox {
    height: 100%;
    width: 42%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform-origin: left, right;
}

.wing-left-top, .wing-right-top {
    background: blue;
    height: var(--wings-tpheight);
    width: var(--top-wing-width);
    border-radius: 90% 10% 10% 0%/ 100% 0% 10% 0%;
}

.wing-left-bottom, .wing-right-bottom {
    background: red;
    height: var(--wings-btmheight);
    width: var(--btm-wing-width);
    border-radius: 0% 30% 50% 90%/ 0% 50% 50% 90%;
}

/* Body Styling */
.mid-body {
    width: 10%;
    height: 50%;
    display: flex;
    flex-direction: column;
}

.mid-part {
    background: var(--midclr);
}

.start {
    width: 100%;
    border-radius: 50%;
    aspect-ratio: 1/1;
}

.midpoint {
    height: 45%;
    width: 100%;
    border-radius: 40%;
}

.end {
    width: 100%;
    height: 60%;
    border-radius: 50%;
}

/* Animation and Utility Classes */
.bgclr, .midshed {
    background: black;
    animation: butterfly 4s infinite linear;
}

@keyframes butterfly {
    0% {
        box-shadow: inset var(--shadow) aqua, var(--shadow) deepskyblue;
    }
    20% {
        box-shadow: inset var(--shadow) lime, var(--shadow) limegreen;
    }
    40% {
        box-shadow: inset var(--shadow) yellow, var(--shadow) greenyellow;
    }
    80% {
        box-shadow: inset var(--shadow) hotpink, var(--shadow) deeppink;
    }
    100% {
        box-shadow: inset var(--shadow) red, var(--shadow) orangered;
    }
}

.fly {
    animation: fly 0.2s infinite linear;
}

@keyframes fly {
    0%, 100% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(80deg);
    }
}

Explanation of CSS

Global Reset:

All elements are reset to remove padding and margins, and box-sizing ensures padding and borders are included in an element's total width and height.

CSS Variables:

The :root selector is used to define reusable variables such as --wings-tpheight, --wings-btmheight, and --shadow. These variables allow for flexibility and easier adjustments to styling.

Body and Box Styling:

The body is styled to center the butterfly both vertically and horizontally using Flexbox.
The .box class is given a square aspect ratio (aspect-ratio: 1/1) to ensure the butterfly scales correctly.

Wing Styling:

Each wing is divided into top and bottom parts, with colors applied using background properties (background: blue and background: red). The border-radius is adjusted to create the unique wing shapes.
The wings are animated using the fly animation, simulating a flapping effect with a keyframe that rotates the wings on the Y-axis.

Butterfly Body:

The butterfly body is split into three parts: head, midsection, and tail. Each part is styled with rounded borders using border-radius, with aspect-ratio applied to the head for a circular appearance.

Animations:

Wings Flapping: The class .fly applies the fly animation to simulate the wings flapping by rotating the Y-axis between 0 and 80 degrees.
Glow Effect: The keyframe animation butterfly creates a glowing effect on the wings and body. The glow color changes through a cycle from aqua to red.

Conclusion

This code combines both HTML and CSS to create a visually stunning butterfly animation with flapping wings and glowing effects. The key concepts we explored are CSS animations, Flexbox for layout control, and CSS variables for reusable values. This simple yet elegant butterfly animation demonstrates how creativity and coding can come together to bring animations to life on the web.

With a bit of modification, you can customize this butterfly by adjusting the colors, shapes, or animation timing to suit your own project!

WebDev

Tuesday, October 1, 2024