Crazed Bacteria

Developer
Paul Sullivan
Size
2,886 Kb
Views
8,096
  1. Crazed Bacteria Previews
  2. Crazed Bacteria HTML Codes
  3. Crazed Bacteria CSS Codes

How do I make an crazed bacteria?

What is a crazed bacteria? How do you make a crazed bacteria? This script and codes were developed by Paul Sullivan on 26 January 2023, Thursday.

Crazed Bacteria Previews
IQ Test

Crazed Bacteria - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Crazed Bacteria</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap"> <div class="bar1"> <div class="ball1"></div> </div> <div class="bar2"> <div class="ball2"></div> </div> <div class="bar3"> <div class="ball3"></div> </div> <div class="bar4"> <div class="ball4"></div> </div> <div class="bar5"> <div class="ball5"></div> </div> <div class="bar6"> <div class="ball6"></div> </div> <div class="bar7"> <div class="ball7"></div> </div> <div class="bar8"> <div class="ball8"></div> </div> <div class="bar9"> <div class="ball9"></div> </div> <div class="bar10"> <div class="ball10"></div> </div> <div class="bar11"> <div class="ball11"></div> </div> <div class="bar12"> <div class="ball12"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Crazed Bacteria - Script Codes CSS Codes

html { background-color: #2e2e2e;
}
/* Fully scalable by editing the $size */
@-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes back_forth { 0% { left: 0px; } 50% { left: 27px; background-color: green; box-shadow: 0 0 27px blue; } 100% { left: 0px; }
}
@keyframes back_forth { 0% { left: 0px; } 50% { left: 27px; background-color: green; box-shadow: 0 0 27px blue; } 100% { left: 0px; }
}
.bar, .wrap .bar1, .wrap .bar2, .wrap .bar3, .wrap .bar4, .wrap .bar5, .wrap .bar6, .wrap .bar7, .wrap .bar8, .wrap .bar9, .wrap .bar10, .wrap .bar11, .wrap .bar12 { width: 30px; height: 1px; position: absolute; top: 50%;
}
.ball, .wrap .bar1 .ball1, .wrap .bar2 .ball2, .wrap .bar3 .ball3, .wrap .bar4 .ball4, .wrap .bar5 .ball5, .wrap .bar6 .ball6, .wrap .bar7 .ball7, .wrap .bar8 .ball8, .wrap .bar9 .ball9, .wrap .bar10 .ball10, .wrap .bar11 .ball11, .wrap .bar12 .ball12 { height: 3px; width: 3px; border-radius: 100%; background-color: red; position: absolute; top: -7.5px; box-shadow: 0 0 5px red;
}
.wrap { height: 30px; width: 30px; position: fixed; top: 50%; left: 50%; margin-top: -15px; margin-left: -15px;
}
.wrap .bar1 { -webkit-animation: rotate 1357ms ease-in-out infinite; animation: rotate 1357ms ease-in-out infinite;
}
.wrap .bar1 .ball1 { -webkit-animation: back_forth 2864ms ease-in-out infinite; animation: back_forth 2864ms ease-in-out infinite;
}
.wrap .bar2 { -webkit-animation: rotate 4035ms ease-in-out infinite; animation: rotate 4035ms ease-in-out infinite;
}
.wrap .bar2 .ball2 { -webkit-animation: back_forth 2230ms ease-in-out infinite; animation: back_forth 2230ms ease-in-out infinite;
}
.wrap .bar3 { -webkit-animation: rotate 1856ms ease-in-out infinite; animation: rotate 1856ms ease-in-out infinite;
}
.wrap .bar3 .ball3 { -webkit-animation: back_forth 4172ms ease-in-out infinite; animation: back_forth 4172ms ease-in-out infinite;
}
.wrap .bar4 { -webkit-animation: rotate 3667ms ease-in-out infinite; animation: rotate 3667ms ease-in-out infinite;
}
.wrap .bar4 .ball4 { -webkit-animation: back_forth 4904ms ease-in-out infinite; animation: back_forth 4904ms ease-in-out infinite;
}
.wrap .bar5 { -webkit-animation: rotate 3659ms ease-in-out infinite; animation: rotate 3659ms ease-in-out infinite;
}
.wrap .bar5 .ball5 { -webkit-animation: back_forth 1108ms ease-in-out infinite; animation: back_forth 1108ms ease-in-out infinite;
}
.wrap .bar6 { -webkit-animation: rotate 4159ms ease-in-out infinite; animation: rotate 4159ms ease-in-out infinite;
}
.wrap .bar6 .ball6 { -webkit-animation: back_forth 2892ms ease-in-out infinite; animation: back_forth 2892ms ease-in-out infinite;
}
.wrap .bar7 { -webkit-animation: rotate 3025ms ease-in-out infinite; animation: rotate 3025ms ease-in-out infinite;
}
.wrap .bar7 .ball7 { -webkit-animation: back_forth 1662ms ease-in-out infinite; animation: back_forth 1662ms ease-in-out infinite;
}
.wrap .bar8 { -webkit-animation: rotate 2946ms ease-in-out infinite; animation: rotate 2946ms ease-in-out infinite;
}
.wrap .bar8 .ball8 { -webkit-animation: back_forth 4399ms -2s ease-in-out infinite; animation: back_forth 4399ms -2s ease-in-out infinite;
}
.wrap .bar9 { -webkit-animation: rotate 2683ms ease-in-out infinite; animation: rotate 2683ms ease-in-out infinite;
}
.wrap .bar9 .ball9 { -webkit-animation: back_forth 1721ms ease-in-out infinite; animation: back_forth 1721ms ease-in-out infinite;
}
.wrap .bar10 { -webkit-animation: rotate 4642ms ease-in-out infinite; animation: rotate 4642ms ease-in-out infinite;
}
.wrap .bar10 .ball10 { -webkit-animation: back_forth 3924ms ease-in-out infinite; animation: back_forth 3924ms ease-in-out infinite;
}
.wrap .bar11 { -webkit-animation: rotate 4850ms ease-in-out infinite; animation: rotate 4850ms ease-in-out infinite;
}
.wrap .bar11 .ball11 { -webkit-animation: back_forth 3705ms -2s ease-in-out infinite; animation: back_forth 3705ms -2s ease-in-out infinite;
}
.wrap .bar12 { -webkit-animation: rotate 4843ms ease-in-out infinite; animation: rotate 4843ms ease-in-out infinite;
}
.wrap .bar12 .ball12 { -webkit-animation: back_forth 1196ms ease-in-out infinite; animation: back_forth 1196ms ease-in-out infinite;
}
Crazed Bacteria - Script Codes
Crazed Bacteria - Script Codes
Home Page Home
Developer Paul Sullivan
Username pwsm50
Uploaded January 26, 2023
Rating 3.5
Size 2,886 Kb
Views 8,096
Do you need developer help for Crazed Bacteria?

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
Name
A Pen by Paul Sullivan
Circular Audio Bars
CSS Particle Box
CSS Star Wars
Get out and vote - Nov. 8th
Breathing Load Screen
A Pen by Paul Sullivan
Flying Bee
CSS speaker
Dart Scoreboard
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!