This content originally appeared on DEV Community and was authored by Owais Aslam
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!
This content originally appeared on DEV Community and was authored by Owais Aslam
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Owais Aslam | Sciencx (2024-07-29T07:44:59+00:00) CSS3 – Animated Butterfly Wings. Retrieved from https://www.scien.cx/2024/07/29/css3-animated-butterfly-wings/
" » CSS3 – Animated Butterfly Wings." Owais Aslam | Sciencx - Monday July 29, 2024, https://www.scien.cx/2024/07/29/css3-animated-butterfly-wings/
HARVARDOwais Aslam | Sciencx Monday July 29, 2024 » CSS3 – Animated Butterfly Wings., viewed ,<https://www.scien.cx/2024/07/29/css3-animated-butterfly-wings/>
VANCOUVEROwais Aslam | Sciencx - » CSS3 – Animated Butterfly Wings. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/29/css3-animated-butterfly-wings/
CHICAGO" » CSS3 – Animated Butterfly Wings." Owais Aslam | Sciencx - Accessed . https://www.scien.cx/2024/07/29/css3-animated-butterfly-wings/
IEEE" » CSS3 – Animated Butterfly Wings." Owais Aslam | Sciencx [Online]. Available: https://www.scien.cx/2024/07/29/css3-animated-butterfly-wings/. [Accessed: ]
rf:citation » CSS3 – Animated Butterfly Wings | Owais Aslam | Sciencx | https://www.scien.cx/2024/07/29/css3-animated-butterfly-wings/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.