Scribd
Upload
67 views

Bb8 Animation HTML y Css

The document contains CSS code for animating a BB-8 droid character from Star Wars. It defines keyframe animations like spin, clockwise, backwise etc. and applies them to elements to make the droid rotate and move. Styles are applied to elements to achieve the 3D rendered look of the spherical droid body and inner details.

Uploaded by

meliodas
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
67 views

Bb8 Animation HTML y Css

The document contains CSS code for animating a BB-8 droid character from Star Wars. It defines keyframe animations like spin, clockwise, backwise etc. and applies them to elements to make the droid rotate and move. Styles are applied to elements to achieve the 3D rendered look of the spherical droid body and inner details.

Uploaded by

meliodas
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BB 8</title>
<link rel="stylesheet" href="css/main.css">
</head>
<div id="bb8-wrapper">
<div class="bb-8"></div>
</div>
</html>

/*******/

body{
margin: 0;
padding: 0;
background: #333;
}

@-webkit-keyframes spin {
0 {
-webkit-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}

@keyframes spin {
0 {
-webkit-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}

@-webkit-keyframes clockwise {
0 {
-webkit-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

@keyframes clockwise {
0 {
-webkit-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

@-webkit-keyframes backwise {
0 {
-webkit-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}

@keyframes backwise {
0 {
-webkit-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}

@-webkit-keyframes linetravel {
0 {
-webkit-transform: rotate(0);
transform: rotate(0)
}

50%{
-webkit-transform: rotate(360deg);
transform: translateX(100%) rotate(360deg);
}

100%{
-webkit-transform: rotate(0);
transform: translateX(0) rotate(0deg);
}
}

@keyframes linetravel {
0 {
-webkit-transform: rotate(0);
transform: rotate(0)
}

50%{
-webkit-transform: rotate(360deg);
transform: translateX(100%) rotate(360deg);
}

100%{
-webkit-transform: rotate(0);
transform: translateX(0) rotate(0deg);
}
}

@-webkit-keyframes rotatex {
0 {
-webkit-transform: rotate(0);
transform: rotateX(0)
}

50%{
-webkit-transform: rotate(360deg);
transform: translateX(100%) rotateX(360deg);
}

100%{
-webkit-transform: rotate(0);
transform: translateX(0) rotateX(0deg);
}
}

@keyframes rotatex {
0 {
-webkit-transform: rotate(0);
transform: rotateX(0)
}

50%{
-webkit-transform: rotate(360deg);
transform: translateX(100%) rotateX(360deg);
}

100%{
-webkit-transform: rotate(0);
transform: translateX(0) rotateX(0deg);
}
}

@-webkit-keyframes rotatey {
0 {
-webkit-transform: rotate(0);
transform: rotateX(0)
}

50%{
-webkit-transform: rotate(360deg);
transform: translateX(100%) rotateY(360deg);
}

100%{
-webkit-transform: rotate(0);
transform: translateX(0) rotateY(0deg);
}
}

@keyframes rotatey {
0 {
-webkit-transform: rotate(0);
transform: rotateX(0)
}
50%{
-webkit-transform: rotate(360deg);
transform: translateX(100%) rotateY(360deg);
}

100%{
-webkit-transform: rotate(0);
transform: translateX(0) rotateY(0deg);
}
}

@-webkit-keyframes rotatexy {

@keyframes rotatexy {
0 {
-webkit-transform: rotate(0);
transform: rotateY(0)
}

50%{
-webkit-transform: rotate(360deg);
transform: translateX(100%) rotateX(360deg) rotateY(360deg)
rotateZ(180deg);
}

100%{
-webkit-transform: rotate(0);
transform: translateX(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
}

#bb8-wrapper{
margin-top: 10vh;
}

.bb-8{
position: relative;
margin-left: calc(50% - 60px);
width: 120px;
height: 78px;
background: white;
border-radius: 50%/60px;
border-bottom-right-radius: 50px 10px;
border-bottom-left-radius: 50px 10px;
border-bottom: 8px solid #ccc;
-webkit-box-shadow: inset -5px -2px 20px rgba(0, 0, 0, 0.4);
box-shadow: inset -5px -2px 20px rgba(0, 0, 0, 0.4);
background-image: radial-gradient(circle at 85px 50px, #555 5px, transparent
6px),/*bottom-right dot*/
radial-gradient(circle at 85px 50px, white 7px, transparent 8px),/*bottom-right
dot border*/
radial-gradient(circle at 85px 50px, #555 10px, transparent 11px),/*bottom-
right dot outer border*/
radial-gradient(circle at 58px 32px, rgba(255, 255, 255, 0.9) 2px, transparent
3px), /*eye small dot*/
radial-gradient(circle at 52px 36px, #333 12px, transparent 13px), /*eye fill*/
radial-gradient(circle at 52px 36px, #555 16px, transparent 17px), /*eye border
*/
radial-gradient(circle at 52px 37px, white 20px, transparent 20px), /*eye outer
border*/
linear-gradient(to top, #aaa 7px, transparent 7px), /*head baseline*/
linear-gradient(to bottom, white 7px, #ccc 7px, #aaa 15px, white 15px, white
18px, #ffa500 18px, #ffa500 24px, transparent 24px), /*head topline*/
linear-gradient(to right, transparent 29px, #ccc 30px, #ccc 31px, transparent
31px, transparent 60px, #ccc 61px, #ccc 62px, transparent 62px), /*gray vertical
decals*/
linear-gradient(to right, transparent 5px, white 5px, white 10px, transparent
10px, transparent 30px, white 30px, white 40px, transparent 40px, transparent 50px,
white 50px, white 100px, transparent 100px, transparent 115px, white
115px),/*bottom-decal-sections*/
linear-gradient(to top, #ffa500 16px, transparent 16px);/*orange-bottom-decal*/
box-shadow: inset -5px -2px 20px rgba(0, 0, 0, 0.4);
}

.bb-8:before{
content: "";
position: absolute;
width: 200px;
height: 200px;
left: -40px;
top: 79px;
border-radius: 50%;
background-color: white;
z-index: -2;
animation: spin 1s infinite linear;
background-image: radial-gradient(ellipse at top right, #ffa500 50px,
transparent 50px),/*top right dot*/
radial-gradient(ellipse at bottom right, #ffa500 50px, transparent 50px), /*b-r
dot*/
radial-gradient(ellipse at top left, #ffa500 50px, transparent 50px), /*t-l
dot*/
radial-gradient(ellipse at bottom left, #ffa500 50px, transparent 50px), /*b-l
dot*/
radial-gradient(circle at 100px 100px, transparent 60px, white 61px),/*body-
background*/
radial-gradient(circle at 100px 100px, transparent 44px, #ffa500 45px),/*center
orange circle*/
linear-gradient(to bottom, transparent 90px, white 90px, white 93px,
transparent 93px, transparent 99px, white 99px, white 103px, transparent 103px,
transparent 108px, white 108px, white 112px, transparent 112px), /*body center
lines*/
radial-gradient(circle at 100px 100px, #aaa 24px, transparent 25px), /*center
gray circle*/
radial-gradient(circle at 100px 100px, white 28px, transparent 29px), /*center
gray circle outline*/
linear-gradient(-45deg, transparent 132px, white 132px, white 136px, #ffa500
136px, #ffa500 152px, white 152px, white 155px, transparent 155px), /* center angle
b-r*/
linear-gradient(45deg, transparent 129px, white 129px, white 133px, #ffa500
133px, #ffa500 150px, white 150px, white 153px, transparent 153px), /*center angle
b-l*/
linear-gradient(to bottom, transparent 75px, white 75px, white 119px,
transparent 119px), radial-gradient(circle at 100px 100px, #aaa 40px, transparent
41px), /*center gray decals-*/
radial-gradient(circle at 100px 100px, white 44px, transparent 45px);/*center
gray decals outline*/
}

.bb-8:hover:before{
animation: spin .5s infinite linear;
}

.bb-8:after{
content: "";
width: 200px;
height: 200px;
border-radius: 50%;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 10px,
transparent 15px);
-webkit-box-shadow: inset 0 -20px 30px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 -20px 30px rgba(0, 0, 0, 0.5);
z-index: -1;
position: absolute;
top: 79px;
left: -40px;
}

/*
.kode-logo{
width: 200px;
margin: 20px;
}

.kode-logo.clockwise{
animation: clockwise 2s infinite linear;
}

.kode-logo.backwise{
animation: backwise 2s infinite linear;
}

.kode-logo.linetravel{
animation: linetravel 4s infinite linear;
}

.kode-logo.rotatex{
animation: rotatex 6s infinite linear;
}

.kode-logo.rotatey{
animation: rotatey 6s infinite linear;
}

.kode-logo.rotatexy{
animation: rotatexy 6s infinite linear;
-webkit-transform-style: preserve-3d;
}*/
/*
.some-div{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
.some-div:after{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}*/
/*
.some-div:before{
content: "Before element";
color: skyblue;
}

.some-div:after{
content: "after element";
color: skyblue;
}
*/

/*
.some-parent{
border: 1px solid peru;
margin: 50px;
position: relative;
}

.input-group{
position: relative;
margin: 20px;
border: 1px solid navy;
}

.input-group:before{
content: "";
width: 10px;
height: 10px;
border-radius:10px;
border: 3px solid green;
position: absolute;
top: 0px;
left: 0px;
background: white;
}

.input-group:checked:before{
content: "�";
border-color: red;
}
*/

You might also like