Flying Bee

Developer
Size
3,711 Kb
Views
10,120

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 Previews

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 */
Flying Bee - Script Codes
Flying Bee - Script Codes
Home Page Home
Developer Paul Sullivan
Username pwsm50
Uploaded January 26, 2023
Rating 4.5
Size 3,711 Kb
Views 10,120
Do you need developer help for Flying Bee?

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!

Paul Sullivan (pwsm50) Script Codes
Create amazing blog posts 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!