CSS3 - Animated Butterfly Wings

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: ``` CSS3 - Animated Butterfly Wings

``` ## 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](https://www.youtube.com/@codewithubes)

codewithubes

CSS3 – Animated Butterfly Wings

Join Our Newsletter. No Spam, Only the good stuff.