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!
