CSS3 AT-AT

Developer

Size

5,768 Kb

Views

6,072

CSS3 AT-AT Previews
CSS3 AT-AT HTML Codes
CSS3 AT-AT CSS Codes

How do I make an css3 at-at?

Just a prefix cleanup of the wonderful CSS3 AT-AT by @clzd Anthony Calzadilla http://www.anthonycalzadilla.com/css3-ATAT/index-bones.html. What is a css3 at-at? How do you make a css3 at-at? This script and codes were developed by Kevin Alford on 07 January 2023, Saturday.

CSS3 AT-AT Previews

CSS3 AT-AT - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 AT-AT</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /*CSS ANIMATION
======================*/
body { background-color: #bbb; color: #333; padding-left: 10px;
}
a { padding: 3px; transition-property: color,background-color; transition-duration: 500ms,500ms;
}
a:hover { background-color: #c70909; color: #fff;
}
@keyframes rotate-skull
{ 0% { transform: rotate(0deg) } 25% { transform: rotate(15deg) } 50% { transform: rotate(-5deg) } 55% { transform: rotate(0deg) } 75% { transform: rotate(-10deg) }
100% { transform: rotate(0deg) }
}
@keyframes rotate-head
{ 0% { transform: rotate(0deg) translate(0px,0px); } 40% { transform: rotate(10deg) translate(15px,5px); } 80% { transform: rotate(-5deg) translate(8px,5px); }
100% { transform: rotate(0deg) translate(0px,0px); }
}
@keyframes rotate-shell
{ 0% { transform: rotate(0deg); } 20% { transform: rotate(3deg); } 40% { transform: rotate(0deg); } 50% { transform: rotate(0deg); } 70% { transform: rotate(-3deg); } 90% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes rotate-hip-a
{ 0% { transform: translate(0px,0px); } 75% { transform: translate(0px,0px); } 80% { transform: translate(5px,0px); } 85% { transform: translate(5px,5px); } 90% { transform: translate(-5px,5px); } 95% { transform: translate(-5px,0px); }
100% { transform: translate(0px,0px); }
}
@keyframes rotate-hip-b
{ 0% { transform: translate(0px,0px); } 55% { transform: translate(0px,0px); } 60% { transform: translate(5px,0px); } 65% { transform: translate(5px,5px); } 70% { transform: translate(-5px,5px); } 75% { transform: translate(-5px,0px); } 80% { transform: translate(0px,0px); }
100% { transform: translate(0px,0px); }
}
@keyframes rotate-hip-c
{ 0% { transform: translate(0px,0px); } 25% { transform: translate(0px,0px); } 30% { transform: translate(5px,0px); } 35% { transform: translate(5px,5px); } 40% { transform: translate(-5px,5px); } 45% { transform: translate(-5px,0px); } 50% { transform: translate(0px,0px); }
100% { transform: translate(0px,0px); }
}
@keyframes rotate-hip-d
{ 0% { transform: translate(0px,0px); } 5% { transform: translate(5px,0px); } 10% { transform: translate(5px,5px); } 15% { transform: translate(-5px,5px); } 20% { transform: translate(-5px,0px); } 25% { transform: translate(0px,0px); }
100% { transform: translate(0px,0px); }
}
@keyframes thigh-a
{ 0% { transform: rotate(0deg); } 70% { transform: rotate(0deg); } 80% { transform: rotate(-13deg); }
100% { transform: rotate(0deg); }
}
@keyframes thigh-b
{ 0% { transform: rotate(0deg); } 50% { transform: rotate(0deg); } 60% { transform: rotate(-13deg); } 80% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes thigh-c
{ 0% { transform: rotate(0deg); } 20% { transform: rotate(0deg); } 30% { transform: rotate(-13deg); } 50% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes thigh-d
{ 0% { transform: rotate(0deg); } 10% { transform: rotate(-13deg); } 30% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes shin-a
{ 0% { transform: rotate(0deg); } 70% { transform: rotate(0deg); } 80% { transform: rotate(23deg); }
100% { transform: rotate(0deg); }
}
@keyframes shin-b
{ 0% { transform: rotate(0deg); } 50% { transform: rotate(0deg); } 60% { transform: rotate(23deg); } 80% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes shin-c
{ 0% { transform: rotate(0deg); } 20% { transform: rotate(0deg); } 30% { transform: rotate(23deg); } 50% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes shin-d
{ 0% { transform: rotate(0deg); } 10% { transform: rotate(23deg); } 30% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes foot-a
{ 0% { transform: rotate(0deg); } 70% { transform: rotate(0deg); } 80% { transform: rotate(-20deg); }
100% { transform: rotate(0deg); }
}
@keyframes foot-b
{ 0% { transform: rotate(0deg); } 50% { transform: rotate(0deg); } 60% { transform: rotate(-20deg); } 80% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes foot-c
{ 0% { transform: rotate(0deg); } 20% { transform: rotate(0deg); } 30% { transform: rotate(-20deg); } 50% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes foot-d
{ 0% { transform: rotate(0deg); } 10% { transform: rotate(-20deg); } 30% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes screen
{ 0% { background-position: left bottom; }
100% { background-position: right bottom; }
}
#atat #shell { animation-name: rotate-shell; animation-duration: 4s; animation-iteration-count: infinite;
}
#atat #skull { animation-name: rotate-skull; animation-duration: 7 s; animation-iteration-count: infinite; transform-origin: 0 50%;
}
#atat #head { animation-name: rotate-head; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 0 50%;
}
#atat #leg-a { animation-name: rotate-hip-a; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 100% 100%;
}
#atat #leg-b { animation-name: rotate-hip-b; animation-duration: 8s; animation-iteration-count: infinite; transform-origin: 100% 100%;
}
#atat #leg-c { animation-name: rotate-hip-c; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 100% 100%;
}
#atat #leg-d { animation-name: rotate-hip-d; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 100% 100%;
}
#atat #leg-a .leg-thigh { animation-name: thigh-a; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-b .leg-thigh { animation-name: thigh-b; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-c .leg-thigh { animation-name: thigh-c; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-d .leg-thigh { animation-name: thigh-d; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-a .leg-shin { animation-name: shin-a; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-b .leg-shin { animation-name: shin-b; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-c .leg-shin { animation-name: shin-c; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-d .leg-shin { animation-name: shin-d; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-a .leg-foot { animation-name: foot-a; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-b .leg-foot { animation-name: foot-b; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-c .leg-foot { animation-name: foot-c; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-d .leg-foot { animation-name: foot-d; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#the-screen { animation-name: screen; animation-duration: 300s; animation-iteration-count: infinite;
}
/*CSS STYLES
======================*/
body { font-family: Helvetica Neue,Arial,Helvetica,sans-serif;
}
#atat { width: 300px; height: 300px; position: relative; top: 60px; left: 50px; margin: 0; padding: 0; z-index: 10;
}
#atat #shell { width: 300px; height: 195px; background: transparent url(atat-body.png) no-repeat top left; background-color: rgba(0, 255, 0, 0.2); position: absolute;
}
#leg-a,
#leg-b,
#leg-c,
#leg-d { height: 450px; width: 131px; position: relative;
}
#leg-a { left: -10px; position: absolute; top: 140px;
}
#leg-b { position: absolute; right: 20px; top: 140px;
}
#leg-c { left: 3px; position: absolute; top: 150px;
}
#leg-d { position: absolute; right: 10px; top: 150px;
}
.leg-thigh { height: 120px; width: 61px; margin: auto; background: url(atat-thigh.png) top center no-repeat; background-color: rgba(0, 0, 255, 0.2); position: relative;
}
.background .leg-thigh { background: url(atat-thigh-dark.png) top center no-repeat; background-color: rgba(255, 0, 0, 0.2);
}
.leg-shin { position: absolute; top: 100px; height: 115px; width: 61px;
}
.leg-shin .exo { height: 115px; width: 61px; margin: auto; position: relative; background: url(atat-knee.png) center top no-repeat, url(atat-shin.png) center bottom no-repeat; background-color: rgba(0, 0, 255, 0.5); z-index: 20;
}
.background .leg-shin .exo { background: url(atat-knee-dark.png) center top no-repeat, url(atat-shin-dark.png) center bottom no-repeat; background-color: rgba(255, 0, 0, 0.5);
}
.leg-foot { height: 90px; width: 101px; margin-left: -20px; position: absolute; bottom: -70px; background: url(atat-foot.png) center bottom no-repeat; background-color: rgba(0, 0, 255, 0.7);
}
.background .leg-foot { background: url(atat-foot-dark.png) center bottom no-repeat; background-color: rgba(255, 0, 0, 0.7);
}
#head { height: 100px; position: absolute; right: -190px; top: 30px; width: 230px;
}
#skull { background: url(atat-skull.png) left center no-repeat; background-color: rgba(255, 0, 255, 0.7); width: 186px; height: 123px; position: absolute; top: 0; right: 0; z-index: 300;
}
#neck { width: 82px; height: 50px; position: absolute; top: 30%; left: 0; background: url(atat-neck.png) left center no-repeat; background-color: rgba(0, 0, 255, 0.7);
}
#the-screen { background: #53809F url(atat-background.jpg) no-repeat scroll 0 100%; border: 1px solid #444444; height: 519px; left: 168px; margin: 0; padding: 0; position: relative; top: 77px; width: 676px;
}
#tablet { background: url(tablet.jpg) center top no-repeat; padding: 0; margin: 0 auto; width: 1000px; height: 1000px; position: relative;
}
@font-face { font-family: hanssolo; src: url(hanssolo.ttf);
}
h1 { font-family: hanssolo; font-size: 3.2em; padding: 0; margin: 0; text-align: center;
}
.specs { width: 900px; margin: 0 auto;
}
.specs h5 { text-align: right; text-transform: uppercase; margin: -5px 0 10px 0; padding: 0; position: relative; right: 105px; font-size: 11px;
}
.specs h5 a { text-decoration: none;
}
.specs p { margin: 5px auto 10px; padding: 0; font-size: 14px; width: 700px;
}
.specs .disclaimer { font-size: 12px;
}
.specs .disclaimer a { color: #000; text-decoration: none;
}
.specs .disclaimer a:hover { color: #fff;
}
span.switch { left: 400px; position: absolute; top: 30px;
}
span.switch a { color: #777; font-size: 12px;
}
span.switch a:hover { color: #fff; font-size: 12px;
}
#atat{border:1px dotted red;}
#atat #shell{border:1px dotted blue;}
#leg-a{left:-10px;position:absolute;top:140px;}
.leg-thigh{border:1px dotted red;}
.leg-shin{border:1px dotted blue;}
.leg-foot{border:1px dotted green;}
#head{border:1px dotted red;}
#skull{border:1px dotted blue;}
#neck{border:1px dotted green;} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Pure CSS3 AT-AT Walker</title>
<style type="text/css" media="screen">	.clearfix:before, .clearfix:after { content: ""; display: table; }	.clearfix:after { clear: both; }	.clearfix { *zoom: 1; }	body {margin:0;}
</style>
</head>
<body> <p> CSS3 AT-AT by <a href="http://www.anthonycalzadilla.com/css3-ATAT/index-bones.html">Anthony Calzadilla</a> @clzd - Copied and cleaned to show my students</p> <div id="atat" href="/"> <div id="head"> <div id="skull"></div> <div id="neck"></div> </div> <div id="leg-a" class="background"> <div class="leg-thigh"> <div class="leg-shin"> <div class="exo"></div> <div class="leg-foot"></div> </div><!-- end shin --> </div><!-- end thigh --> </div> <div id="leg-b" class="background"> <div class="leg-thigh"> <div class="leg-shin"> <div class="exo"></div> <div class="leg-foot"></div> </div><!-- end shin --> </div><!-- end thigh --> </div> <div id="shell"></div> <div id="leg-c"> <div class="leg-thigh"> <div class="leg-shin"> <div class="exo"></div> <div class="leg-foot"></div> </div><!-- end shin --> </div><!-- end thigh --> </div> <div id="leg-d"> <div class="leg-thigh"> <div class="leg-shin"> <div class="exo"></div> <div class="leg-foot"></div> </div><!-- end shin --> </div><!-- end thigh --> </div> </div>
</body>
</html>
</body>
</html>

CSS3 AT-AT - Script Codes CSS Codes

/*CSS ANIMATION
======================*/
body { background-color: #bbb; color: #333; padding-left: 10px;
}
a { padding: 3px; transition-property: color,background-color; transition-duration: 500ms,500ms;
}
a:hover { background-color: #c70909; color: #fff;
}
@keyframes rotate-skull
{ 0% { transform: rotate(0deg) } 25% { transform: rotate(15deg) } 50% { transform: rotate(-5deg) } 55% { transform: rotate(0deg) } 75% { transform: rotate(-10deg) }
100% { transform: rotate(0deg) }
}
@keyframes rotate-head
{ 0% { transform: rotate(0deg) translate(0px,0px); } 40% { transform: rotate(10deg) translate(15px,5px); } 80% { transform: rotate(-5deg) translate(8px,5px); }
100% { transform: rotate(0deg) translate(0px,0px); }
}
@keyframes rotate-shell
{ 0% { transform: rotate(0deg); } 20% { transform: rotate(3deg); } 40% { transform: rotate(0deg); } 50% { transform: rotate(0deg); } 70% { transform: rotate(-3deg); } 90% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes rotate-hip-a
{ 0% { transform: translate(0px,0px); } 75% { transform: translate(0px,0px); } 80% { transform: translate(5px,0px); } 85% { transform: translate(5px,5px); } 90% { transform: translate(-5px,5px); } 95% { transform: translate(-5px,0px); }
100% { transform: translate(0px,0px); }
}
@keyframes rotate-hip-b
{ 0% { transform: translate(0px,0px); } 55% { transform: translate(0px,0px); } 60% { transform: translate(5px,0px); } 65% { transform: translate(5px,5px); } 70% { transform: translate(-5px,5px); } 75% { transform: translate(-5px,0px); } 80% { transform: translate(0px,0px); }
100% { transform: translate(0px,0px); }
}
@keyframes rotate-hip-c
{ 0% { transform: translate(0px,0px); } 25% { transform: translate(0px,0px); } 30% { transform: translate(5px,0px); } 35% { transform: translate(5px,5px); } 40% { transform: translate(-5px,5px); } 45% { transform: translate(-5px,0px); } 50% { transform: translate(0px,0px); }
100% { transform: translate(0px,0px); }
}
@keyframes rotate-hip-d
{ 0% { transform: translate(0px,0px); } 5% { transform: translate(5px,0px); } 10% { transform: translate(5px,5px); } 15% { transform: translate(-5px,5px); } 20% { transform: translate(-5px,0px); } 25% { transform: translate(0px,0px); }
100% { transform: translate(0px,0px); }
}
@keyframes thigh-a
{ 0% { transform: rotate(0deg); } 70% { transform: rotate(0deg); } 80% { transform: rotate(-13deg); }
100% { transform: rotate(0deg); }
}
@keyframes thigh-b
{ 0% { transform: rotate(0deg); } 50% { transform: rotate(0deg); } 60% { transform: rotate(-13deg); } 80% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes thigh-c
{ 0% { transform: rotate(0deg); } 20% { transform: rotate(0deg); } 30% { transform: rotate(-13deg); } 50% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes thigh-d
{ 0% { transform: rotate(0deg); } 10% { transform: rotate(-13deg); } 30% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes shin-a
{ 0% { transform: rotate(0deg); } 70% { transform: rotate(0deg); } 80% { transform: rotate(23deg); }
100% { transform: rotate(0deg); }
}
@keyframes shin-b
{ 0% { transform: rotate(0deg); } 50% { transform: rotate(0deg); } 60% { transform: rotate(23deg); } 80% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes shin-c
{ 0% { transform: rotate(0deg); } 20% { transform: rotate(0deg); } 30% { transform: rotate(23deg); } 50% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes shin-d
{ 0% { transform: rotate(0deg); } 10% { transform: rotate(23deg); } 30% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes foot-a
{ 0% { transform: rotate(0deg); } 70% { transform: rotate(0deg); } 80% { transform: rotate(-20deg); }
100% { transform: rotate(0deg); }
}
@keyframes foot-b
{ 0% { transform: rotate(0deg); } 50% { transform: rotate(0deg); } 60% { transform: rotate(-20deg); } 80% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes foot-c
{ 0% { transform: rotate(0deg); } 20% { transform: rotate(0deg); } 30% { transform: rotate(-20deg); } 50% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes foot-d
{ 0% { transform: rotate(0deg); } 10% { transform: rotate(-20deg); } 30% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes screen
{ 0% { background-position: left bottom; }
100% { background-position: right bottom; }
}
#atat #shell { animation-name: rotate-shell; animation-duration: 4s; animation-iteration-count: infinite;
}
#atat #skull { animation-name: rotate-skull; animation-duration: 7 s; animation-iteration-count: infinite; transform-origin: 0 50%;
}
#atat #head { animation-name: rotate-head; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 0 50%;
}
#atat #leg-a { animation-name: rotate-hip-a; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 100% 100%;
}
#atat #leg-b { animation-name: rotate-hip-b; animation-duration: 8s; animation-iteration-count: infinite; transform-origin: 100% 100%;
}
#atat #leg-c { animation-name: rotate-hip-c; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 100% 100%;
}
#atat #leg-d { animation-name: rotate-hip-d; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 100% 100%;
}
#atat #leg-a .leg-thigh { animation-name: thigh-a; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-b .leg-thigh { animation-name: thigh-b; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-c .leg-thigh { animation-name: thigh-c; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-d .leg-thigh { animation-name: thigh-d; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-a .leg-shin { animation-name: shin-a; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-b .leg-shin { animation-name: shin-b; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-c .leg-shin { animation-name: shin-c; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-d .leg-shin { animation-name: shin-d; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-a .leg-foot { animation-name: foot-a; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-b .leg-foot { animation-name: foot-b; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-c .leg-foot { animation-name: foot-c; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#atat #leg-d .leg-foot { animation-name: foot-d; animation-duration: 7s; animation-iteration-count: infinite; transform-origin: 50% 0;
}
#the-screen { animation-name: screen; animation-duration: 300s; animation-iteration-count: infinite;
}
/*CSS STYLES
======================*/
body { font-family: Helvetica Neue,Arial,Helvetica,sans-serif;
}
#atat { width: 300px; height: 300px; position: relative; top: 60px; left: 50px; margin: 0; padding: 0; z-index: 10;
}
#atat #shell { width: 300px; height: 195px; background: transparent url(atat-body.png) no-repeat top left; background-color: rgba(0, 255, 0, 0.2); position: absolute;
}
#leg-a,
#leg-b,
#leg-c,
#leg-d { height: 450px; width: 131px; position: relative;
}
#leg-a { left: -10px; position: absolute; top: 140px;
}
#leg-b { position: absolute; right: 20px; top: 140px;
}
#leg-c { left: 3px; position: absolute; top: 150px;
}
#leg-d { position: absolute; right: 10px; top: 150px;
}
.leg-thigh { height: 120px; width: 61px; margin: auto; background: url(atat-thigh.png) top center no-repeat; background-color: rgba(0, 0, 255, 0.2); position: relative;
}
.background .leg-thigh { background: url(atat-thigh-dark.png) top center no-repeat; background-color: rgba(255, 0, 0, 0.2);
}
.leg-shin { position: absolute; top: 100px; height: 115px; width: 61px;
}
.leg-shin .exo { height: 115px; width: 61px; margin: auto; position: relative; background: url(atat-knee.png) center top no-repeat, url(atat-shin.png) center bottom no-repeat; background-color: rgba(0, 0, 255, 0.5); z-index: 20;
}
.background .leg-shin .exo { background: url(atat-knee-dark.png) center top no-repeat, url(atat-shin-dark.png) center bottom no-repeat; background-color: rgba(255, 0, 0, 0.5);
}
.leg-foot { height: 90px; width: 101px; margin-left: -20px; position: absolute; bottom: -70px; background: url(atat-foot.png) center bottom no-repeat; background-color: rgba(0, 0, 255, 0.7);
}
.background .leg-foot { background: url(atat-foot-dark.png) center bottom no-repeat; background-color: rgba(255, 0, 0, 0.7);
}
#head { height: 100px; position: absolute; right: -190px; top: 30px; width: 230px;
}
#skull { background: url(atat-skull.png) left center no-repeat; background-color: rgba(255, 0, 255, 0.7); width: 186px; height: 123px; position: absolute; top: 0; right: 0; z-index: 300;
}
#neck { width: 82px; height: 50px; position: absolute; top: 30%; left: 0; background: url(atat-neck.png) left center no-repeat; background-color: rgba(0, 0, 255, 0.7);
}
#the-screen { background: #53809F url(atat-background.jpg) no-repeat scroll 0 100%; border: 1px solid #444444; height: 519px; left: 168px; margin: 0; padding: 0; position: relative; top: 77px; width: 676px;
}
#tablet { background: url(tablet.jpg) center top no-repeat; padding: 0; margin: 0 auto; width: 1000px; height: 1000px; position: relative;
}
@font-face { font-family: hanssolo; src: url(hanssolo.ttf);
}
h1 { font-family: hanssolo; font-size: 3.2em; padding: 0; margin: 0; text-align: center;
}
.specs { width: 900px; margin: 0 auto;
}
.specs h5 { text-align: right; text-transform: uppercase; margin: -5px 0 10px 0; padding: 0; position: relative; right: 105px; font-size: 11px;
}
.specs h5 a { text-decoration: none;
}
.specs p { margin: 5px auto 10px; padding: 0; font-size: 14px; width: 700px;
}
.specs .disclaimer { font-size: 12px;
}
.specs .disclaimer a { color: #000; text-decoration: none;
}
.specs .disclaimer a:hover { color: #fff;
}
span.switch { left: 400px; position: absolute; top: 30px;
}
span.switch a { color: #777; font-size: 12px;
}
span.switch a:hover { color: #fff; font-size: 12px;
}
#atat{border:1px dotted red;}
#atat #shell{border:1px dotted blue;}
#leg-a{left:-10px;position:absolute;top:140px;}
.leg-thigh{border:1px dotted red;}
.leg-shin{border:1px dotted blue;}
.leg-foot{border:1px dotted green;}
#head{border:1px dotted red;}
#skull{border:1px dotted blue;}
#neck{border:1px dotted green;}

Home Page	Home
Developer	Kevin Alford
Username	zeroeth
Uploaded	January 07, 2023
Rating	3.5
Size	5,768 Kb
Views	6,072

Do you need developer help for CSS3 AT-AT?

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!

Kevin Alford (zeroeth) Script Codes

Name	Size
Javascript Starfleet Basics	2,612 Kb
Three.js Shader Fun	3,196 Kb
Animation Sine Movement	2,425 Kb
Css text wave	1,906 Kb
Processing.js Random Slice	33,101 Kb
Three.js WebGL Clock	3,187 Kb
Website Design Basics	3,413 Kb
Browser language	1,568 Kb
A Pen by Kevin Alford	1,325 Kb
A CSS trifold valentines.	8,360 Kb

Create amazing Facebook ads 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!

Similar Scripts & Codes

Name	Username	Size
A Pen by Ben Babics	Benbabics	2,957 Kb
Birthday Party Starter	Aussieyang	1,629 Kb
Weather App 2	MightyJoeW	2,877 Kb
Slide In Panel	Vikvarg	2,811 Kb
Z-index demo	Kblh	1,534 Kb
A Pen by Miro Olma	Programiro	2,342 Kb
Hovers with popups	Zacharyolson	2,380 Kb
Polo, the flying squirrel	Agbales	2,445 Kb
Freecodecamp - Tribute Page	Samoht513	3,583 Kb
Font stack	Adrianjacob	1,868 Kb

Do you want hide your ip address?

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!