CSS Only Dragonfly

Developer
Nour Abusoud
Size
3,117 Kb
Views
24,288
  1. CSS Only Dragonfly Previews
  2. CSS Only Dragonfly HTML Codes
  3. CSS Only Dragonfly CSS Codes

How do I make an css only dragonfly?

What is a css only dragonfly? How do you make a css only dragonfly? This script and codes were developed by Nour Abusoud on 10 November 2022, Thursday.

CSS Only Dragonfly Previews
IQ Test

CSS Only Dragonfly - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Only Dragonfly </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="dragonfly"> <div class="wing wing-left"> </div> <div class="dragonfly-body"> <div class="head"></div> <div class="main"></div> </div> <div class="wing wing-right"> </div>
</div>
</body>
</html>

CSS Only Dragonfly - Script Codes CSS Codes

.dragonfly { width: 600px; margin: 150px auto; position: relative;
}
.dragonfly-body, .wing { display: inline-block; position: relative;
}
.dragonfly-body { z-index: 2;
}
.dragonfly-body:after { position: absolute; content: ''; height: 15px; width: 15px; background: #456590; bottom: -55px; left: 2px; border-radius: 300px 300px 300px 100px; -webkit-transform: rotate(316deg); transform: rotate(316deg);
}
.head { height: 20px; width: 20px; top: -22px; background: #456590; border-radius: 50%;
}
.head:before, .head:after { content: ''; height: 100px; width: 100px; top: -100px; position: absolute; border: 1px solid transparent;
}
.head:after { left: 10px; border-radius: 360px 0 0 0; border-left-color: #456590;
}
.head:before { right: 10px; border-radius: 0 360px 0 0; border-right-color: #456590;
}
.main { width: 20px; height: 80px; background: #456590; border-radius: 360px;
}
.main:after { content: ''; position: absolute; width: 15px; height: 40px; bottom: -40px; left: 2px; background: #456590; opacity: 0.9; border-radius: 360px;
}
.wing { top: -50px; width: 180px; height: 50px;
}
.wing-left { background: -webkit-linear-gradient(313deg, #FE1374 0%, #C71286 100%); background: linear-gradient(-223deg, #FE1374 0%, #C71286 100%); left: 4px; border-radius: 400px 600px 0 400px; -webkit-transform-origin: right center; transform-origin: right center; -webkit-animation: flap-left 0.9s ease-in infinite; animation: flap-left 0.9s ease-in infinite;
}
.wing-left:after { content: ''; width: 170px; height: 40px; right: -3px; top: 49px; position: absolute; border-radius: 360px 0 360px 0; box-sizing: border-box; background: -webkit-linear-gradient(313deg, #FE1374 0%, #C71286 100%); background: linear-gradient(-223deg, #FE1374 0%, #C71286 100%); -webkit-transform-origin: right center; transform-origin: right center; -webkit-transform: rotate(-6deg); transform: rotate(-6deg);
}
.wing-right { right: 4px; background: -webkit-linear-gradient(227deg, #FE1374 0%, #C71286 100%); background: linear-gradient(223deg, #FE1374 0%, #C71286 100%); border-radius: 600px 400px 400px 0; -webkit-transform-origin: left center; transform-origin: left center; -webkit-animation: flap-right 0.9s ease-in infinite; animation: flap-right 0.9s ease-in infinite;
}
.wing-right:after { content: ''; width: 170px; height: 40px; left: -3px; top: 49px; position: absolute; border-radius: 0 360px 0 360px; background: -webkit-linear-gradient(227deg, #FE1374 0%, #C71286 100%); background: linear-gradient(223deg, #FE1374 0%, #C71286 100%); -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: rotate(6deg); transform: rotate(6deg);
}
@-webkit-keyframes flap-right { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 20% { -webkit-transform: rotateY(15deg); transform: rotateY(15deg); } 40% { -webkit-transform: rotateY(30deg); transform: rotateY(30deg); } 50% { -webkit-transform: rotateY(45deg); transform: rotateY(45deg); } 60% { -webkit-transform: rotateY(60deg); transform: rotateY(60deg); } 80% { -webkit-transform: rotateY(45deg); transform: rotateY(45deg); } 90% { -webkit-transform: rotateY(30deg); transform: rotateY(30deg); } 100% { -webkit-transform: rotateY(15deg); transform: rotateY(15deg); }
}
@keyframes flap-right { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 20% { -webkit-transform: rotateY(15deg); transform: rotateY(15deg); } 40% { -webkit-transform: rotateY(30deg); transform: rotateY(30deg); } 50% { -webkit-transform: rotateY(45deg); transform: rotateY(45deg); } 60% { -webkit-transform: rotateY(60deg); transform: rotateY(60deg); } 80% { -webkit-transform: rotateY(45deg); transform: rotateY(45deg); } 90% { -webkit-transform: rotateY(30deg); transform: rotateY(30deg); } 100% { -webkit-transform: rotateY(15deg); transform: rotateY(15deg); }
}
@-webkit-keyframes flap-left { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 20% { -webkit-transform: rotateY(-15deg); transform: rotateY(-15deg); } 40% { -webkit-transform: rotateY(-30deg); transform: rotateY(-30deg); } 50% { -webkit-transform: rotateY(-45deg); transform: rotateY(-45deg); } 60% { -webkit-transform: rotateY(-60deg); transform: rotateY(-60deg); } 80% { -webkit-transform: rotateY(-45deg); transform: rotateY(-45deg); } 90% { -webkit-transform: rotateY(-30deg); transform: rotateY(-30deg); } 100% { -webkit-transform: rotateY(-15deg); transform: rotateY(-15deg); }
}
@keyframes flap-left { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 20% { -webkit-transform: rotateY(-15deg); transform: rotateY(-15deg); } 40% { -webkit-transform: rotateY(-30deg); transform: rotateY(-30deg); } 50% { -webkit-transform: rotateY(-45deg); transform: rotateY(-45deg); } 60% { -webkit-transform: rotateY(-60deg); transform: rotateY(-60deg); } 80% { -webkit-transform: rotateY(-45deg); transform: rotateY(-45deg); } 90% { -webkit-transform: rotateY(-30deg); transform: rotateY(-30deg); } 100% { -webkit-transform: rotateY(-15deg); transform: rotateY(-15deg); }
}
CSS Only Dragonfly - Script Codes
CSS Only Dragonfly - Script Codes
Home Page Home
Developer Nour Abusoud
Username nourabusoud
Uploaded November 10, 2022
Rating 3
Size 3,117 Kb
Views 24,288
Do you need developer help for CSS Only Dragonfly?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nour Abusoud (nourabusoud) Script Codes
Name
Macaroons
Responsive felxbox timeline
CSS Turkey
CSS Bar Chart
Simple Candy Cane
CSS only dynamic 2 slices pie charts
The Jealous Buttons
Thanks giving turkey
CSS Heart Loaders
Menu - pop out icons
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!