Brian The CSS Bee
How do I make an brian the css bee?
Playing with opacity and animation . What is a brian the css bee? How do you make a brian the css bee? This script and codes were developed by Joni Trythall on 02 October 2022, Sunday.
Brian The CSS Bee - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Brian The CSS Bee</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=ABeeZee' rel='stylesheet' type='text/css'>
<div class='contain'> <div class='bee'> <div class='bee-body'> <div class='antena'> <div class='top'></div> <div class='top top-right'></div> </div> <div class='antena antena-right'></div> <div class='eye'></div> <div class='eye eye-right'></div> <div class='smile'> <div class='mouth'></div> </div> <div class='stripe'></div> <div class='stripe stripe-bottom'></div> <div class='wings'></div> <div class='wings wings-right'></div> <div class='stinger'></div> </div> </div> <div class='trail'></div>
</div>
<div class='talk'> <div class='bubble'> <h2>Buzz Buzz</h2> <div class='triangle'></div> </div>
</div>
</body>
</html>
Brian The CSS Bee - Script Codes CSS Codes
body { background-color: #c4edf7;
}
.bee { position: absolute; top: 150px; left: 270px; -webkit-transform: rotate(40deg); transform: rotate(40deg); -webkit-animation: move 5s; animation: move 5s;
}
.bee-body { width: 150px; height: 200px; border-radius: 50%; background-color: #f5cc69; position: relative;
}
.antena { width: 20px; height: 50px; border-radius: 50%; border-right: 2px solid #232323; position: absolute; top: -30px; left: 45px; -webkit-transform: rotate(-20deg); transform: rotate(-20deg); z-index: -1;
}
.top { width: 12px; height: 12px; border-radius: 50%; background-color: #232323; position: absolute; top: -5px; left: 7px;
}
.top-right { top: 10px; left: 55px;
}
.antena-right { -webkit-transform: rotate(200deg); transform: rotate(200deg); left: 80px;
}
.eye { height: 10px; width: 10px; border-radius: 50%; background-color: #232323; position: absolute; left: 50px; top: 25px; -webkit-animation: face 6s; animation: face 6s;
}
.eye-right { left: 90px;
}
.smile { width: 40px; height: 30px; border-bottom: 2px solid #232323; border-radius: 50%; position: absolute; top: 30px; left: 55px; -webkit-animation: face 6s; animation: face 6s;
}
.mouth { width: 20px; height: 13px; background-color: #232323; position: absolute; left: 10px; top: 30px; border-radius: 10% 10% 50% 50%; -webkit-animation: mouth 6s; animation: mouth 6s;
}
.stripe { width: 148px; height: 15px; background-color: #232323; border-radius: 40% 40% 10% 10%; position: absolute; top: 80px; left: 1px; opacity: .80;
}
.stripe-bottom { top: 120px; width: 145px; left: 3px; border-radius: 30% 30% 100% 100%;
}
.wings { height: 150px; width: 70px; background-color: white; border-radius: 50%; opacity: .70; position: absolute; top: 40px; left: -40px; -webkit-transform: rotate(30deg); transform: rotate(30deg); z-index: -1; -webkit-animation: fly 2s infinite; animation: fly 2s infinite;
}
.wings-right { left: 123px; -webkit-transform: rotate(-30deg); transform: rotate(-30deg); -webkit-animation: fly-2 2s infinite; animation: fly-2 2s infinite;
}
.stinger { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 40px solid #232323; position: absolute; top: 193px; z-index: -1; left: 55px;
}
.trail { width: 6px; height: 350px; border-left: 4px dashed gray; position: absolute; opacity: .30; top: 305px; left: 151px; z-index: -2; -webkit-transform: rotate(40deg); transform: rotate(40deg); -webkit-animation: trail 6s; animation: trail 6s;
}
.talk { position: absolute; left: 475px; top: 20px; -webkit-animation: speech 9s; animation: speech 9s;
}
.bubble { width: 200px; height: 150px; background-color: white; border-radius: 50%; position: relative;
}
.triangle { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 40px solid white; -webkit-transform: rotate(50deg); transform: rotate(50deg); position: absolute; top: 85px; left: -15px;
}
h2 { font-family: 'ABeeZee', sans-serif; font-color: #232323; position: absolute; top: 37px; left: 40px;
}
@-webkit-keyframes move { 0% { top: 200%; left: -100%; } 50% { -webkit-transform: rotate(0deg) rotateY(180deg); }
}
@-webkit-keyframes fly { 50% { top: 0px; -webkit-transform: rotate(70deg); }
}
@-webkit-keyframes fly-2 { 50% { top: 0px; -webkit-transform: rotate(-70deg); }
}
@-webkit-keyframes speech { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 100; }
}
@-webkit-keyframes face { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 100; }
}
@-webkit-keyframes mouth { 0% { opacity: 0; height: 0; } 50% { opacity: 0; height: 0px; } 100% { opacity: 100; height: 13px; }
}
@-webkit-keyframes trail { 0% { opacity: 0; } 50% { opacity: 0; } 70% { opacity: 0; } 100% { opacity: .30; }
}
@keyframes move { 0% { top: 200%; left: -100%; } 50% { transform: rotate(0deg) rotateY(180deg); }
}
@keyframes fly { 50% { top: 0px; transform: rotate(70deg); }
}
@keyframes fly-2 { 50% { top: 0px; transform: rotate(-70deg); }
}
@keyframes speech { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 100; }
}
@keyframes face { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 100; }
}
@keyframes mouth { 0% { opacity: 0; height: 0; } 50% { opacity: 0; height: 0px; } 100% { opacity: 100; height: 13px; }
}
@keyframes trail { 0% { opacity: 0; } 50% { opacity: 0; } 70% { opacity: 0; } 100% { opacity: .30; }
}

Developer | Joni Trythall |
Username | jonitrythall |
Uploaded | October 02, 2022 |
Rating | 4 |
Size | 3,922 Kb |
Views | 26,299 |
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 |
SVG Loaders | 3,649 Kb |
Hinged Twitter Button | 3,761 Kb |
Bounce Delay Loader | 2,894 Kb |
Blurred Gear Loader | 3,783 Kb |
Frosted Glass Quote | 2,591 Kb |
Rainbow Loader | 2,708 Kb |
Floated Image Link Issue | 2,847 Kb |
Meat Selection | 2,169 Kb |
Animated Shopping Cart Icons | 7,610 Kb |
Flexbox Tinkering | 1,796 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 |
Mega menu | DimaZubkov | 5,066 Kb |
Pure CSS Menu | Bronsrobin | 3,321 Kb |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
Light Switch | Bartuc | 4,933 Kb |
Canvas Fireworks | Jackrugile | 6,200 Kb |
Nested flexbox layout for library catalog | Boycetrus | 3,271 Kb |
CSS-Flexbox-Demo | Sstiglets | 1,709 Kb |
RPG Style Text Dialogue | Odylic | 2,635 Kb |
Fading Navigation Bar | J-w-v | 2,805 Kb |
Next Word Predictor | Rfalor | 2,776 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!