CSS3 – Animated Butterfly Wings

Owais Aslam — Mon, 29 Jul 2024 07:44:59 +0000

Creating an animated butterfly with flapping wings using CSS3 involves using keyframe animations and transforming elements. Here’s an example to get you started:

HTML:

Create an HTML file and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 - Animated Butterfly Wings</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="butterfly">
        <div class="body-part">
            <div class="head-part">
                <div class="antena"></div>
                <div class="antena right"></div>
            </div>
        </div>

        <div class="wing-side left">
            <div class="wing top"></div>
            <div class="wing bottom"></div>
        </div><!-- left -->

        <div class="wing-side right">
            <div class="wing top"></div>
            <div class="wing bottom"></div>
        </div><!-- left -->
    </div><!-- butterfly -->
</body>
</html>

CSS:

Create a styles.css file and add the following code:

body {
     background: url('https://subtlepatterns.com/patterns/mooning.png');
}
.butterfly {
     position: absolute; 
   top: 45%;
   left: 50%;
     width: 275px; 
   height: 400px;
     margin: -100px 0 0 -150px;
}
.butterfly .body-part {
     width: 25px; 
   height: 160px;
     background-color: #38009c;
     -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
     border-radius: 40% 40% 40% 40% / 40% 40% 20% 20%;
     position: absolute; 
   top: 30px; 
   left: 125px; 
   z-index: 0;
}
.butterfly .body-part .head-part {
     width: 35px; 
   height: 35px;
     background-color: #38009c;
     border-radius: 50%; 
   margin: -8px 0 0 -5px;
}
.butterfly .body-part .head-part .antena {
     width: 1px; 
   height: 60px;
     background-color: #38009c;
     position: absolute; 
   top: -50px;
     -webkit-transform: rotate(-20deg);
     -moz-transform: rotate(-20deg);
     -ms-transform: rotate(-20deg);
     -o-transform: rotate(-20deg);
}
.butterfly .body-part .head-part .antena.right {
     -webkit-transform: rotate(10deg);
     -moz-transform: rotate(10deg);
     -ms-transform: rotate(10deg);
     -o-transform: rotate(10deg); 
   right: 0;
}
.butterfly:hover {
     cursor: pointer;
}
.butterfly:hover .wing-side.left {
     -webkit-animation: movewingsleft ease-out 0.1s infinite;
     animation: movewingsleft ease-out 0.1s infinite;
}
.butterfly:hover .wing-side.right {
     -webkit-animation: movewingsright ease-out 0.1s infinite;
     animation: movewingsright ease-out 0.1s infinite;
}
.wing {
     position: relative;
     width: 100px;
     height: 130px;
     background-color: rgba(174, 47, 206, 1);
     -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
     border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.wing:after {
     content: '';
     position: absolute;
     border-bottom: 70px solid rgba(174, 47, 206, 1);
     border-left: 41px solid transparent;
     border-right: 41px solid transparent;
     top: -37px;
     left: 9px;
}
.wing.bottom {
     width: 80px;
     height: 100px;
     top: -25px;
     left: -7px;
     background-color: rgba(47, 92, 206, 1);
}
.wing.bottom:after {
     top: -32px;
     left: 5px;
     border-bottom: 63px solid rgba(47, 92, 206, 1);
     border-left-width: 35px;
     border-right-width: 35px;
}
.wing-side {
     opacity: 0.7;
}
 .wing-side .top {
     -webkit-transform: rotate(-120deg);
     -moz-transform: rotate(-120deg);
     -ms-transform: rotate(-120deg);
     -o-transform: rotate(-120deg);
}
.wing-side .bottom {
     -webkit-transform: rotate(-60deg);
     -moz-transform: rotate(-60deg);
     -ms-transform: rotate(-60deg);
     -o-transform: rotate(-60deg);
}
.wing-side.left {
     -moz-transform: scaleX(-1);
     -o-transform: scaleX(-1);
     -webkit-transform: scaleX(-1);
     transform: scaleX(-1);
     filter: FlipH;
     -ms-filter: "FlipH";
     position: absolute;
     left: 0;
}
.wing-side.right {
     position: absolute;
     right: 0;
}
@-webkit-keyframes movewingsleft {
     from {
         transform: rotateY(180deg);
         left: 0;
    }
     to {
         transform: rotateY(130deg);
         left: 30px;
    }
}
@keyframes movewingsleft {
     from {
         transform: rotateY(180deg);
         left: 0;
    }
     to {
         transform: rotateY(130deg);
         left: 30px;
    }
}
@-webkit-keyframes movewingsright {
     from {
         transform: rotateY(0deg);
         right: 0;
    }
     to {
         transform: rotateY(50deg);
         right: 30px;
    }
}
@keyframes movewingsright {
     from {
         transform: rotateY(0deg);
         right: 0;
    }
     to {
         transform: rotateY(50deg);
         right: 30px;
    }
}

You can adjust the animation duration, keyframes, and other properties to achieve the desired effect.

Happy coding!

Subscribe my YouTube channel for more tricks:

Code With Ubes

DEV Community: Owais Aslam

CSS3 – Animated Butterfly Wings

HTML:

CSS:

Subscribe my YouTube channel for more tricks: