Flying Bee
How do I make an flying bee?
CSS bee flying through the air. What is a flying bee? How do you make a flying bee? This script and codes were developed by Paul Sullivan on 26 January 2023, Thursday.
Flying Bee - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flying Bee</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap"> <div class="wrap2"> <div class="body"></div> <div class="wing1"></div> <div class="wing2"></div> <div class="stinger"></div> <div class="eyes"> <div class="pupil"></div> </div> </div> <div class="cloud1"></div> <div class="cloud2"></div> <div class="cloud3"></div> <div class="debri1"></div> <div class="debri2"></div> <div class="debri3"></div> <div class="debri4"></div> <div class="debri5"></div> <div class="debri6"></div>
</div>
</body>
</html>
Flying Bee - Script Codes CSS Codes
html { background-color: #369; height: 100%; overflow: hidden;
}
.wrap { position: relative;
}
/* THE BEE THE BEE THE BEE THE BEE */
@-webkit-keyframes dodging1 { 0% { top: 0; } 50% { top: 75px; } 100% { top: 0; }
}
@keyframes dodging1 { 0% { top: 0; } 50% { top: 75px; } 100% { top: 0; }
}
.wrap2 { position: absolute; left: 20%; margin-top: -150px; -webkit-animation: dodging1 1s ease-in-out infinite; animation: dodging1 1s ease-in-out infinite;
}
/* THE BEE THE BEE THE BEE THE BEE */
/* BODY BODY BODY BODY */
.body { position: absolute; top: 250px; left: 250px; height: 85px; width: 75px; border-radius: 100%; background-color: #FFB733; box-shadow: 20px 0 0 #000, 40px -3px 0 #ffb733, 60px -7px 0 #000, 80px -11px 0 #ffb733;
}
/* BODY BODY BODY BODY */
/* WINGS WINGS WINGS WINGS */
@-webkit-keyframes flutter2 { 0% { -webkit-transform: rotate(80deg); transform: rotate(80deg); } 50% { -webkit-transform: rotate(100deg); transform: rotate(100deg); }
}
@keyframes flutter2 { 0% { -webkit-transform: rotate(80deg); transform: rotate(80deg); } 50% { -webkit-transform: rotate(100deg); transform: rotate(100deg); }
}
@-webkit-keyframes flutter1 { 0% { -webkit-transform: rotate(20deg); transform: rotate(20deg); } 50% { -webkit-transform: rotate(40deg); transform: rotate(40deg); }
}
@keyframes flutter1 { 0% { -webkit-transform: rotate(20deg); transform: rotate(20deg); } 50% { -webkit-transform: rotate(40deg); transform: rotate(40deg); }
}
.wing1 { position: absolute; height: 55px; width: 55px; top: 210px; left: 280px; -webkit-transform: rotate(20deg); transform: rotate(20deg); -webkit-transform-origin: bottom right; transform-origin: bottom right; border-top-right-radius: 100%; border-bottom-left-radius: 100%; border-top-left-radius: 10px; background-color: #ddd; z-index: -1; -webkit-filter: blur(1px); filter: blur(1px); -webkit-animation: flutter1 0.01s linear reverse infinite; animation: flutter1 0.01s linear reverse infinite;
}
.wing2 { position: absolute; height: 55px; width: 55px; top: 205px; left: 290px; -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: bottom right; transform-origin: bottom right; border-top-right-radius: 100%; border-bottom-left-radius: 100%; border-top-left-radius: 10px; background-color: #ddd; z-index: 1; -webkit-filter: blur(1px); filter: blur(1px); -webkit-animation: flutter2 0.01s linear infinite; animation: flutter2 0.01s linear infinite;
}
/* WINGS WINGS WINGS WINGS */
/* STINGER STINGER STINGER STINGER */
.stinger { position: absolute; height: 55px; width: 55px; top: 255px; left: 355px; -webkit-transform: rotate(320deg); transform: rotate(320deg); border-top-right-radius: 50%; border-bottom-left-radius: 100%; border-top-left-radius: 10px; background-color: #000; z-index: -1;
}
/* STINGER STINGER STINGER STINGER */
/* EYES EYES EYES EYES */
.eyes { position: absolute; height: 25px; width: 25px; top: 260px; left: 250px; background-color: #eee; box-shadow: 20px 0 0 #eee; border-radius: 100%;
}
.eyes .pupil { position: absolute; height: 4px; width: 4px; top: 13px; left: 2px; background-color: #000; border-radius: 100%; box-shadow: 20px 0 0 #000;
}
/* EYES EYES EYES EYES */
/* DEBRIS DEBRIS DEBRIS DEBRIS */
@-webkit-keyframes debri { 0% { left: -150px; } 100% { left: 125%; }
}
@keyframes debri { 0% { left: -150px; } 100% { left: 125%; }
}
.debri1 { position: absolute; width: 100px; height: 1px; background-color: #000; top: 300px; left: -150px; -webkit-animation: debri 0.6s 0.5s ease-out infinite; animation: debri 0.6s 0.5s ease-out infinite;
}
.debri2 { position: absolute; width: 75px; height: 2px; background-color: #000; top: 170px; left: -150px; -webkit-animation: debri 0.6s 0.4s ease-out infinite; animation: debri 0.6s 0.4s ease-out infinite;
}
.debri3 { position: absolute; width: 60px; height: 2px; background-color: #000; top: 275px; left: -150px; z-index: -1; -webkit-animation: debri 0.6s 1.45s ease-out infinite; animation: debri 0.6s 1.45s ease-out infinite;
}
.debri4 { position: absolute; width: 80px; height: 1px; background-color: #000; top: 400px; left: -150px; -webkit-animation: debri 0.6s 0.3s ease-out infinite; animation: debri 0.6s 0.3s ease-out infinite;
}
.debri5 { position: absolute; width: 90px; height: 2px; background-color: #000; top: 315px; left: -150px; -webkit-animation: debri 0.6s 0.8s ease-out infinite; animation: debri 0.6s 0.8s ease-out infinite;
}
.debri6 { position: absolute; width: 100px; height: 2px; background-color: #000; top: 265px; left: -150px; z-index: -1; -webkit-animation: debri 0.6s 0.7s ease-out infinite; animation: debri 0.6s 0.7s ease-out infinite;
}
/* DEBRIS DEBRIS DEBRIS DEBRIS */
/* CLOUDS CLOUDS CLOUDS CLOUDS */
@-webkit-keyframes cloud { 0% { left: -150px; } 100% { left: 125%; }
}
@keyframes cloud { 0% { left: -150px; } 100% { left: 125%; }
}
@-webkit-keyframes cloud2 { 0% { left: -150px; } 100% { left: 175%; }
}
@keyframes cloud2 { 0% { left: -150px; } 100% { left: 175%; }
}
.cloud1 { position: absolute; height: 30px; width: 30px; top: 100px; left: -150px; border-radius: 100%; box-shadow: 50px 50px 2px rgba(255, 255, 255, 0.95), 30px 55px 1px rgba(255, 255, 255, 0.95), 10px 50px 1px rgba(255, 255, 255, 0.95), 20px 35px 1px rgba(255, 255, 255, 0.95), 40px 35px 1px rgba(255, 255, 255, 0.95); -webkit-animation: cloud 10s linear infinite; animation: cloud 10s linear infinite; z-index: -1;
}
.cloud2 { position: absolute; height: 60px; width: 60px; top: 0px; left: -950px; border-radius: 100%; box-shadow: 100px 200px 2px rgba(255, 255, 255, 0.95), 50px 205px 1px rgba(255, 255, 255, 0.95), 10px 200px 1px rgba(255, 255, 255, 0.95), 35px 170px 1px rgba(255, 255, 255, 0.95), 70px 170px 1px rgba(255, 255, 255, 0.95); -webkit-animation: cloud 5s 2s linear infinite; animation: cloud 5s 2s linear infinite; z-index: -1;
}
.cloud3 { position: absolute; height: 100px; width: 100px; top: 200px; left: -950px; border-radius: 100%; box-shadow: 150px 200px 2px rgba(255, 255, 255, 0.95), 75px 205px 1px rgba(255, 255, 255, 0.95), 10px 200px 1px rgba(255, 255, 255, 0.95), 45px 150px 1px rgba(255, 255, 255, 0.95), 120px 150px 1px rgba(255, 255, 255, 0.95); -webkit-animation: cloud2 2.8s 1s linear infinite; animation: cloud2 2.8s 1s linear infinite; z-index: 1;
}
/* CLOUDS CLOUDS CLOUDS CLOUDS */
Developer | Paul Sullivan |
Username | pwsm50 |
Uploaded | January 26, 2023 |
Rating | 4.5 |
Size | 3,711 Kb |
Views | 10,120 |
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!
Name | Size |
Colorful Animated Border | 3,351 Kb |
A Pen by Paul Sullivan | 2,349 Kb |
Dart Scoreboard | 4,848 Kb |
Breathing Load Screen | 2,198 Kb |
Asana Style Buttons | 2,502 Kb |
Another Simple CSS load animation | 2,688 Kb |
CSS Breathing Particle Orb | 8,158 Kb |
CSS Particle Box | 67,348 Kb |
Thumbs up toggle | 2,516 Kb |
Full screen burger menu | 3,923 Kb |
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!
Name | Username | Size |
Heartbeat | Apetrov | 2,079 Kb |
Experiment | Toddmoy | 2,849 Kb |
Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
A Pen by Alex Edwards | Exards | 8,218 Kb |
Animate elements with fixed gradient | Badabam | 4,406 Kb |
HEXAGON | Aurumlux | 1,684 Kb |
A Pen by Dalton Liu | Liudalton | 12,437 Kb |
Slider for stackoverflow | KKOKU | 3,222 Kb |
Falling Down the Rabbit Hole | Rachelnabors | 4,578 Kb |
Funny menu | AxeLVaisper | 4,671 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!