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 |
Flexbox Tinkering | 1,796 Kb |
Blurred Gear Loader | 3,783 Kb |
Weird Circle Loader | 2,792 Kb |
Animated Shopping Cart Icons | 7,610 Kb |
Spring Into CSS Grid | 2,630 Kb |
Floated Image Link Issue | 2,847 Kb |
Solar Eclipse Loader | 3,012 Kb |
CSS Alarm Clock | 3,302 Kb |
Meat Selection | 2,169 Kb |
Rainbow Loader | 2,708 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 |
Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 Kb |
CSS background-size - GSAP | Jonathan | 2,209 Kb |
React Vote Component | Souporserious | 5,465 Kb |
Improve | Gavra | 1,652 Kb |
A Pen by Taylor Vowell | Taylorvowell | 5,962 Kb |
Google Fonts Sass Mixin | HugoGiraudel | 4,237 Kb |
Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
Hexagons | Ashmind | 4,360 Kb |
CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
Zip Button test | Lje7462 | 1,932 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!