add here
Email To
Send your code on your email ID as HTML file
×
Submit
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <title>Skillsbattle | Flying Butterfly</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <style> .butterfly { display: flex; flex-direction: row; flex-wrap: nowrap; position: absolute; top: 30%; left: 40%; } .left-wing { transform-origin: right; animation: dinesh 0.35s ease-in-out infinite; } .right-wing { transform-origin: left; animation: dinesh 0.35s ease-in-out infinite; } @keyframes dinesh { 0% { transform: rotateY(0deg); } 45% { transform: rotateY(75deg); } 100% { transform: rotateY(0deg); } } </style> <h1>HOW TO CREATE FLYING BUTTERFLY WITH CSS ANIMATION</h1> <div class="butterfly"> <div class="left-wing"><img src="images/wing-left.png"></div> <div class="right-wing"><img src="images/wing-right.png"></div> </div> </body> </html>
