BB-8 CSS

Developer
Ivan Sakoman
Size
5,002 Kb
Views
38,456
  1. BB-8 CSS Previews
  2. BB-8 CSS HTML Codes
  3. BB-8 CSS CSS Codes
  4. BB-8 CSS JS Codes

How do I make an bb-8 css?

What is a bb-8 css? How do you make a bb-8 css? This script and codes were developed by Ivan Sakoman on 12 June 2022, Sunday.

BB-8 CSS Previews
IQ Test

BB-8 CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>BB-8 CSS</title> <link href="https://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="text-wrapper"> <h1>BB-8</h1> <p>Click him to talk ツ</p> <audio class="audio" src="https://freesound.org/data/previews/376/376772_6976063-lq.mp3" type="audio/mpeg"></audio>
</div>
<div class="bb-8"> <div class="shadow"></div> <div class="head"> <div class="head-top"> <div class="b1"></div> <div class="lens1"></div> <div class="lens2"></div> <div class="b2"></div> <div class="b3"></div> </div> <div class="head-bottom"></div> <div class="antena"></div> <div class="shadow1"></div> </div> <div class="shadow-wrapper"> <div class="shadow"></div> </div> <div class="body"> <div class="body-disc1"> <div class="dots"></div> <div class="b1"></div> </div> <div class="body-disc2"> <div class="dots"></div> <div class="b1"></div> </div> <div class="body-disc3"> <div class="dots"></div> <div class="b1"></div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

BB-8 CSS - Script Codes CSS Codes

body { background-color: #3498db; overflow: hidden; font-family: 'Audiowide', cursive;
}
.text-wrapper { width: 400px; margin: 0 auto;
}
.text-wrapper h1, .text-wrapper p { text-align: center;
}
.bb-8 { position: absolute; left: 0; top: 300px; cursor: pointer; animation: tranitionss 5s linear infinite;
}
.bb-8 .shadow { position: absolute; left: 30px; border-radius: 100%; box-shadow: 0 285px 35px 15px #333; z-index: -5; width: 240px; height: 30px; background-color: transparent; opacity: .55;
}
.head { transform-origin: 150px 150px; transform: rotate(0deg); transition: all .3s ease; animation: head-turn 5s linear infinite;
}
.head-top { position: absolute; top: -120px; left: calc(50% - 100px); width: 200px; height: 120px; overflow: hidden; background-color: #eee; border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;
}
.head-top .b1 { position: absolute; top: 10px; left: 20px; height: 10px; width: 150px; background-color: #219efd;
}
.head-top .b1::after { content: ""; position: absolute; top: 25px; left: -10px; width: 190px; height: 6px; background-color: #fc830b;
}
.head-top .b2 { position: absolute; bottom: 7px; left: 0; height: 10px; width: 200px; background-color: #219efd;
}
.head-top .b3 { position: absolute; bottom: 25px; left: 0; height: 18px; width: 30px; background-color: #fc830b;
}
.head-top .b3:after { content: ""; display: block; position: absolute; bottom: 0; left: 40px; height: 18px; width: 10px; background-color: #fc830b;
}
.head-top .b3:before { content: ""; display: block; position: absolute; bottom: 0; left: 180px; height: 18px; width: 30px; background-color: #fc830b;
}
.head-top .lens1 { position: absolute; left: 60px; top: 20px; width: 50px; height: 50px; border-radius: 50px; background-color: #333; border: 7px solid #eee;
}
.head-top .lens1:after { content: ""; position: absolute; top: 11px; left: 23px; width: 10px; height: 10px; border-radius: 100%; background-color: #ddd;
}
.head-top .lens1:before { content: ""; position: absolute; top: 8px; left: 14px; width: 28px; height: 18px; transform: rotate(33deg); border-radius: 100%; background-color: #555;
}
.head-top .lens2 { position: absolute; left: 125px; top: 55px; width: 30px; height: 30px; border-radius: 50px; background-color: #333; border: 5px solid #eee; box-shadow: 0 0 0 1px black;
}
.head-top .lens2:after { content: ""; position: absolute; top: 6px; left: 13px; width: 10px; height: 7px; border-radius: 100%; background-color: #aaa; transform: rotate(33deg);
}
.head-top .lens2:before { content: ""; position: absolute; top: 22px; left: -42px; width: 15px; height: 15px; border-radius: 100%; background-color: #ccc; animation: light-blink 2s ease-in-out infinite;
}
.head-bottom { display: block; position: absolute; top: 0; left: 50px; border-top: 15px solid #ccc; border-left: 15px solid transparent; border-right: 15px solid transparent; height: 0; width: 170px;
}
.antena { position: absolute; top: -190px; right: 110px; z-index: -1; background-color: #888; border-top: 20px solid #333; border-bottom: 40px solid #333; display: block; border-radius: 2px; width: 5px; height: 40px;
}
.antena::after { content: ""; position: absolute; right: 30px; border-radius: 2px; display: block; width: 5px; height: 80px; background-color: #fff;
}
.shadow1 { width: 150px; height: 50px; background-color: #333; border-radius: 100%; z-index: -1; position: absolute; left: 75px; top: -20px; opacity: .4;
}
.shadow-wrapper { position: absolute; width: 300px; height: 300px; overflow: hidden; background-color: transparent; border-radius: 150px; z-index: 1;
}
.shadow-wrapper .shadow { width: 400px; height: 400px; background-color: transparent; border: 100px solid #333; border-radius: 100%; position: absolute; top: -220px; left: -200px; opacity: .4;
}
.body { position: relative; width: 300px; height: 300px; border-radius: 150px; background-color: #eee; overflow: hidden; z-index: -2; animation: rotation 5s linear infinite;
}
.dots { position: absolute; width: 15px; height: 15px; background-color: #999; border-radius: 20px;
}
.body-disc1, .body-disc2, .body-disc3 { position: absolute; width: 150px; height: 150px; border: 40px solid #fc830b; border-radius: 150px; background-color: #eee;
}
.body-disc1 { left: -130px; top: -10px;
}
.body-disc1:after { content: ""; display: block; position: absolute; width: 80px; height: 5px; background-color: #999; left: 170px; top: 10px; z-index: -1; transform: rotate(-25deg);
}
.body-disc1 .dots { top: -5px; left: 180px;
}
.body-disc1 .dots:after { content: ""; position: absolute; top: 35px; left: 15px; width: 15px; height: 15px; background-color: #999; border-radius: 20px;
}
.body-disc1 .b1 { position: absolute; top: 70px; left: 130px; transform: rotate(100deg); width: 20px; height: 40px; background-color: #fc830b;
}
.body-disc1 .b1:after { content: ""; position: absolute; left: -5px; top: 58px; width: 30px; height: 30px; background-color: #999; border-radius: 20px;
}
.body-disc2 { left: 120px; top: -130px;
}
.body-disc2:after { content: ""; display: block; position: absolute; width: 80px; height: 5px; background-color: #999; left: 20px; top: 190px; z-index: -1; transform: rotate(93deg);
}
.body-disc2 .dots { left: 35px; top: 190px;
}
.body-disc2 .dots:after { content: ""; position: absolute; top: 7px; left: 33px; width: 15px; height: 15px; background-color: #999; border-radius: 20px;
}
.body-disc2 .b1 { position: absolute; top: 118px; left: 39px; transform: rotate(23deg); width: 20px; height: 40px; background-color: #fc830b;
}
.body-disc3 { left: 105px; top: 135px;
}
.body-disc3:after { content: ""; display: block; position: absolute; width: 80px; height: 5px; background-color: #999; left: -80px; top: 10px; z-index: -1; transform: rotate(33deg);
}
.body-disc3 .dots { top: -10px; left: -40px;
}
.body-disc3 .dots:after { content: ""; position: absolute; top: 30px; left: -17px; width: 15px; height: 15px; background-color: #999; border-radius: 20px;
}
.body-disc3 .dots:before { content: ""; position: absolute; top: 70px; left: 100px; width: 30px; height: 30px; background-color: #999; border-radius: 20px;
}
.body-disc3 .b1 { position: absolute; top: 0px; left: 90px; transform: rotate(23deg); width: 20px; height: 40px; background-color: #fc830b;
}
.body-disc3 .b1:after { content: ""; position: absolute; left: -70px; top: 50px; transform: rotate(-89deg); width: 20px; height: 60px; background-color: #fc830b;
}
.body-disc3 .b1:before { content: ""; position: absolute; left: 0px; top: 115px; transform: rotate(0deg); width: 20px; height: 60px; background-color: #fc830b;
}
@keyframes rotation { 0% { transform: rotate(0); } 50% { transform: rotate(270deg); } 100% { transform: rotate(0); }
}
@keyframes tranitionss { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(900px, 0, 0); } 100% { transform: translate3d(0, 0, 0); }
}
@keyframes head-turn { 0% { transform: rotate(-15deg); } 45% { transform: rotate(-15deg); } 50% { transform: rotate(0); } 51% { transform: rotate(15deg); } 95% { transform: rotate(15deg); } 98% { transform: rotate(0); } 100% { transform: rotate(-15deg); }
}
@keyframes light-blink { 0% { background-color: #e74c3c; box-shadow: 0 0 30px 2px #e74c3c; } 100% { background-color: #aaa; box-shadow: 0 0 0 0 transparent; }
}

BB-8 CSS - Script Codes JS Codes

$(document).ready(function(){ var audio = $('.audio')[0]; $('.bb-8').click(function(){ audio.play(); });
});
BB-8 CSS - Script Codes
BB-8 CSS - Script Codes
Home Page Home
Developer Ivan Sakoman
Username ssaakkaa
Uploaded June 12, 2022
Rating 3
Size 5,002 Kb
Views 38,456
Do you need developer help for BB-8 CSS?

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!

Ivan Sakoman (ssaakkaa) Script Codes
Name
Label expand
3D cube rotation
Apple logo bubbles
Binary controller
Bootstrap header
Bootstrap example
OnHover transition
Form elements
CSS work desk
Ribon label
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!