Brian The CSS Bee

Developer
Joni Trythall
Size
3,922 Kb
Views
26,299

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 Previews
IQ Test

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; }
}
Brian The CSS Bee - Script Codes
Brian The CSS Bee - Script Codes
Home Page Home
Developer Joni Trythall
Username jonitrythall
Uploaded October 02, 2022
Rating 4
Size 3,922 Kb
Views 26,299
Do you need developer help for Brian The CSS 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!

Joni Trythall (jonitrythall) Script Codes
Name
Flexbox Tinkering
Blurred Gear Loader
Weird Circle Loader
Animated Shopping Cart Icons
Spring Into CSS Grid
Floated Image Link Issue
Solar Eclipse Loader
CSS Alarm Clock
Meat Selection
Rainbow Loader
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!